html, body {
  font-family: 'Roboto', sans-serif;
  color: #9fa1a4;
  line-height: 1.5;
  min-height:100%;  
  background:#fff;
  margin: 0;padding: 0;
	
}
a{color: #000;text-decoration:none;}
a:link,a:visited,a:active {color: #000;text-decoration:none;}
a:hover{color: #000;text-decoration:none;}


.bck_blue_overlay2 {color:#fff;height:500px;position:relative;
  background: linear-gradient(to bottom right, #1b3caf, rgba(0,0,0,0)), url(https://pricing.nspire.dk/img/bck_shopping.jpg) center center ;}

.bck_blue_overlay {color:#fff;height:500px;position:relative;
  background: linear-gradient(to bottom right, #1b3caf, rgba(0,0,0,0)), url(https://pricing.nspire.dk/img/hero_bck.jpg) top center ;}

.bck_blue_overlay h1, .bck_blue_overlay2 h1{color:#fff;font-size:4.6em;}
.bck_blue_overlay p, .bck_blue_overlay2 p{padding:20px 5px;font-size:1.4em;}
.content_center_center {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.searchbox_input_size{width:400px;}
.searchbox_submit{width:200px;}
.input_text{border:1px solid #ddd;padding:10px 14px;border-radius:4px;}
.searchresult{background:#f4f4f4;padding:50px 0px;}
.offer_wrap{border-radius:6px;background:#fff;padding:10px 20px;margin:20px;color:#000;} 
.offer_wrap .offer_img{max-height:200px;}
.offer_wrap .desc{min-height:100px;}
.offer_wrap .img_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 175px;
    position: relative;
	margin:30px;
}
.offer_wrap .productbrand{font-weight:bold;padding-bottom:10px;font-size:1.4em;}
.offer_wrap .productlink{font-weight:bold;padding-top:10px;font-size:1.4em;border-top:1px solid #e4e4e4;margin-top:10px;}
.offer_wrap .productprice{display:inline-block;font-weight:bold;padding-top:10px;color:#8aa;font-size:2em;width:50%;}
.offer_wrap .productbtn{display:inline-block;width:50%;text-align:right;}
.pagelist{display: table; width:auto !important;margin-bottom:40px;}
.pagelist tr{}
.pagelist td{text-align:center;font-size:1.6em;}
.pagelist .pagej{padding:2px 4px;cursor:pointer;padding:4px 20px;}
.pagelist .pagej_s{color:#fff;background:#000;padding:4px 20px;border-radius:4px;}

.filterlist{padding:20px 10%;}
.filter_brand{border:1px solid #ddd; border-radius:6px;padding:20px;text-align:center;margin:20px;font-weight:bold;}
.filter_brand:hover{background:#f4f4f4;}

.custom-select{padding:10px;border:1px solid #ccc;border-radius:4px;}
.noproducts{text-align:center;font-size:3em; padding: 80px 10px;}

/* The container must be positioned relative: */
.custom-select {
  position: relative;

}




/* Fade in */
.link_fadein a {
	display: inline-block;
	position: relative;
	padding: 0.2em 0;
	overflow: hidden;
}
.link_fadein a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.1em;
	background-color: hotpink;
 	transition: opacity 300ms, transform 300ms;
	opacity: 1;
	transform: translate3d(-100%, 0, 0);

}

.link_fadein a:hover::after,.link_fadein a:focus::after {transform: translate3d(0, 0, 0);}
.link_fadein a.noline::after {padding:14px 5px;background-color:transparent;} 

.linkline_purple::after{background-color: #903ba7;}


.hide{display:none;}
.leader{font-size:2em;color:#fff;}
.leader i{color:#eedab1;text-decoration:none;font-family: Georgia;font-size:1.1em;}
.txt_white{color:#ffffff;}
.txt_black{color:#000000}
.txt_pink{color:#e41a4f;}

#mySidenav a{width:100%;}
#mySidenav a.closebtn{text-align:right;}

h1{
	font-family: 'Rufina', serif;
	color: #333;
	letter-spacing: 0px;
	font-weight: normal;
	font-size: 3em;	
}

h2{font-size: 3rem;
	font-family: 'Rufina', serif;
	font-weight: normal;
    padding-bottom: 15px;	
	color:#333;
}
h3 {
	font-family: 'Rufina', serif;
    font-size: 3em;
    padding-bottom: 15px;
	

}
h4{font-size: 1.5rem;font-weight:normal;color:#000;}
.h4, .h5, .h6, h4, h5, h6 {
    margin-top: 10px;
    margin-bottom: 10px;
	color:#333;
}
.h5, h5 {
    font-size: 1.3em;
    font-weight: normal;
}
h1 span, h2 span {color: #e41a4f;}
.h1_big{font-size:5em;}
.h1_big_xl{font-size:7em;}
.h2_big{font-size:4em;}
.h2_mid{font-size:3em;}
.pink_preheader{
  text-transform: uppercase;
  font-size: 18px;
  color: #e41a4f;
  letter-spacing: 4px;
}	
.h1_subhead{margin-top: 20px;font-size: 2.0em;color:#333;}

p {
    margin: 0px 0px 10px 0px;
}
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
}
section{padding:80px 0px;}



.arrowlist ul {
  list-style: none;
}

.arrowlist ul li:before{
   content: '';
   position: absolute;
   border-right:2px solid black;
   border-bottom:2px solid black;
   width:10px;
   height:10px;
   top: calc(50% - 4px);
   left: -20px;
   transform: translateY(-50%) rotate(-45deg);
}
.arrowlist ul li {
  position: relative; padding-bottom: 10px; color:#000;
}



/* intro :: frontpage */
.intro{
	font-family: 'Rufina', serif;
	font-size:2.4em;
	position:fixed;
	z-index:9800;
	left:0;
	top:0;
	width:100%;
	height:100vh;
	background-color:#000;
	transition: 1s;
	
}
.intro_logo-header{
	position:absolute;
	top:45%;
	left:50%;
	transform: translate(-50%,-50%);
	color:#fff; 
	letter-spacing: 3px;
	width:700px;
}
.intro_logo{
	position:relative;
	display:inline-block;
	bottom:-20px;
	opacity:0;
}
.intro_logo.active{
	bottom:0;
	opacity:1;
	transition: ease-in-out 0.5s;
}
.intro_logo.fade{
	bottom:150px;
	opacity:0;
	transition: ease-in-out 0.5s;
}

/* intro :: frontpage :: END */




/* front hero */
@keyframes fadeIn_with_delay {
  0% { opacity: 0; bottom:-100px;}
  100% { opacity: 1; bottom:0px;}
 
}
.fadein_1{animation: fadeIn_with_delay 0.5s;}
.fadein_2{animation: fadeIn_with_delay 1.5s;}
.fadein_3{animation: fadeIn_with_delay 2.5s;}

.zoom { cursor:pointer; transition: transform ease-in .2s;}
.zoom:hover {  transform: scale(1.05); }

.hero_wrap{height:1000px;position:relative;overflow:hidden;}

.box_uink_big{position:relative;background:#e3e7eb;border-radius:50px;margin:30px;height:800px;overflow:hidden;}
.box_uink_sml_hori{position:relative;background:#e3e7eb;border-radius:50px;margin:0px 30px;height:300px;overflow:hidden;}

.box_uink_sml{position:relative;border-radius:50px;margin:30px;height:800px;overflow:hidden;}
.box_uink_txt{z-index:1;background:#fff;border-radius:50px;position:absolute;bottom:30px;right:30px;padding:30px 50px;;width:400px;
	font-size:1.4em;font-weight:bold;color:#000;	
}
.box_uink_kpi{z-index:2;background:#fff;border-radius:30px;position:absolute;top:20px;left:20px;padding:20px 40px;
		
}
.box_uink_kpi .txt{padding-left:50px;font-size:3em;font-weight:bold;color:#000;margin-top:0px;}
.box_uink_kpi .txtsm{padding-left:50px;font-size:1.2em;font-weight:normal;color:#000;}
.box_uink_kpi img{margin-top:20px;}
.box_uink_kpi .img_thumb_pink{float:left;width:32px;margin-top:20px;}
.box_uink_sml_bottom{padding-bottom:60px;}


.portfolio_hbs{height:1800px;background:url(/img/portfolio_hbs_big.jpg) no-repeat top center; background-size:contain;}
.portfolio_so{height:1800px;background:url(/img/portfolio_so2.jpg) no-repeat top center; background-size:contain;}
.portfolio_gr{height:1800px;background:url(/img/portfolio_gr.jpg) no-repeat top center; background-size:contain;}
.portfolio_npsyk{height:400px;background:url(/img/portfolio_npsyk_slim.jpg) no-repeat top center; background-size:contain;}
.portfolio_rikkefrost{height:1800px;background:url(/img/portfolio_rikkefrost.jpg) no-repeat top center; background-size:contain;}


.pricecalc_warp{
	border-radius:50px;
	position:relative;
	padding:60px 0px 60px 0px;
	background:#f7f7f7;
	margin:80px 30px 120px 30px;
	/*border:1px solid #d0d0d0;*/
}	
.pricecalc_warp .hd_sec{padding-top:10px;padding-left:100px;}
.pricecalc_warp .greybar{border-left:1px solid #d0d0d0;}
.pricecalc_warp h2 {font-size: 4em;}
.pricecalc_warp h3 {
    color: #333;
	font-family: 'Roboto', sans-serif;
    font-size: 1.8em;
	
}
.pricecalc_warp_div{position:absolute;left:50px;top:50px;}


/* front hero::end */


/*  frontpage: 360 digital strategy */
#front_360_section{
	
	border-radius:50px;
	position:relative;

	margin:80px 30px 120px 30px;
	
	background: #061a35;

	height:900px;

	position:relative;
}
#front_360_section h2{position:relative;}	
#front_360_section .h2_sub{color:#eee;font-size: 1.4em;margin-top:0px;}
.front360_user{
	position:absolute;top:400px;
	left:calc(50% - 70px);
	width:140px;height:140px;
	background:  url(/img/_surveylead/user_outline.png);
    background-position-x: right;
    background-position-y: top;
	background-repeat:no-repeat;
	background-size: contain;	
	
}
.front360_user_txt{position:absolute;top:545px;left:calc(50% - 80px);
	font-weight:700;font-size:1.2em;text-transform: capitalize;width:160px; color:#fff;
}

.front360_circle{
	position:absolute;
	left:calc(50% - 250px);
	width:500px;
	height:500px;
	border: 2px dashed #133a6e;
	border-radius: 50%;
	top:60px;
	animation: 50s rotate360 infinite linear;
	
}
.front360_line{border: 1px dashed #fff;height:1px;
	position:absolute;
	width:250px;
	left:calc(50% - 400px);
	top:480px;
}
.front360_ring{
	width:40px; height:40px; border-radius:50%;
	background: rgba(226,67,115,0.6);
	display:inline-block;
	position:absolute;
	z-index:1;
	
	-webkit-box-shadow: 0px 0px 31px -5px rgba(255,255,255,0.85);
	-moz-box-shadow: 0px 0px 31px -5px rgba(255,255,255,0.85);
	box-shadow: 0px 0px 31px -5px rgba(255,255,255,0.85);	
}
.front360_dot{
	width:24px; height:24px; border-radius:50%;
	
	background: #e24373 linear-gradient(135deg, rgba(222,198,198,0.45) 0%,rgba(226,67,115,1) 100%);


	display:inline-block;
	position:absolute;
	z-index:3;
}


.front360_dot_white{
	width:22px; height:22px; border-radius:50%;position:absolute;
	display:inline-block;background: #fff;
	z-index:2;
}
.front360_txtbox{
	position:absolute;
	color:#fff;
	text-align:center;
}
.front360_txtbox b{font-weight:700;font-size:1.2em;text-transform: capitalize;}
@keyframes rotate360 {
  to { transform: rotate(360deg); }
}
/*  frontpage: 360 digital strategy :: End */



.hd_subtxt{font-size:18px;}
.hd_subtxt b{color:#333;}

.hide{display:none;}

.row{margin-left:0px;margin-right:0px;}

.left_col_width{width:90%;}

.arrow {
  display: inline-block;
  position: absolute;
  top:30px;
  right: 4px;
  width: 8px;
  height: 8px;
  text-indent: -9999px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  text-decoration: none;
  color: transparent;
}

.arrow:before {
  display: block;
  height: 200%;
  width: 200%;
  margin-left: -50%;
  margin-top: -50%;
  content: "";
  transform: rotate(45deg);
}
.arrow.down {
  transform: rotate(-135deg);
}
.arrow.scrolled {
  border-top: 2px solid #333;
  border-left: 2px solid #333;

}

.shadowed{box-shadow: 0 -0.0625rem 1.0625rem -0.125rem #5e71774a;}
.shadowed_deep{box-shadow: 0px 44px 74px rgb(0 0 0 / 15%);}


.sectionhd{margin-bottom:30px;}

.txt-indent{padding-left:50px;padding-right:50px;}

.articles{color:#000;}
.articles h3{color:#000;font-weight:700;}

h3.pre-headline {
	font-family: 'Roboto', sans-serif;
	font-size: 1.2em;
  position: relative;
  display: inline-block;
  margin: 0;
  font-weight:600;
  color:#333;
  margin:0px; padding:0px;
}
h3.pre-headline:after {
  position: absolute;
  content: "";
  width: 80px;
  height: 1px;
  background-color: #121217;
  position: absolute;
  left: calc(100% + 20px);
  top: 50%;
}
h3.pre-headline-red-text {
	font-family: 'Roboto', sans-serif;
	font-size: 1.2em;
  position: relative;
  display: inline-block;
  margin: 0;
  font-weight:600;
  color:#e41a4f;
  margin:0px; padding:0px;
}
h3.pre-headline-red-text:after {
  position: absolute;
  content: "";
  width: 80px;
  height: 1px;
  background-color: #e41a4f;
  position: absolute;
  left: calc(100% + 20px);
  top: 50%;
}

.sectionhd .sub-header {
  text-transform: uppercase;
  font-size: 13px;
  color: #e41a4f;
  letter-spacing: 2px;
}

.section_padding{padding:80px 0px;}

.mobile_bottompadding{}



.dot_bounce { 
	position:relative;
	background-color: rgba(226,67,115,1);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    position: absolute;
    top: 14px;
    right: 10px;
	padding-top:1px;
    animation: bounce 1.5s linear infinite;
}
@-webkit-keyframes bounce {
	0%, 20%, 40%, 60%, 80%, to {
	transform: translateY(0)
  }
  50% {
	transform: translateY(-6px)
  }
}
@keyframes bounce {
  0%, 20%, 40%, 60%, 80%, to {
	transform: translateY(0)
  }
  50% {
	transform: translateY(-6px)
  }
}

.front_case_wrap{display: inline-block;overflow: hidden;position: relative;width:100%;height:100%;cursor:pointer;}
.front_case_ele{position:relative;margin:10px;background:#f4f4f4;font-size: 1.8em;min-height:300px;transition: all 1s;}
/*.front_case_ele:hover{transform: scale(1.1);}	*/
.front_case_txt_box{padding:20px;color:#fff;}
.front_case_ele .case_type{position:absolute;bottom:70px;left:20px;}
.front_case_ele .case_type span{color:#fff;background:#d45a7a;padding:6px 12px;border-radius:4px;font-size: 0.6em;}
.front_case_ele .case_client{position:absolute;bottom:18px;left:20px;color:#fff;font-size: 1.1em;}

.front_webshop_choose_wrap{padding:20px;position:relative;}
.front_webshop_choose{left:0;right:0;margin:auto;background:#fff;max-width:600px;box-shadow: 0px 44px 74px rgb(0 0 0 / 15%);}
.front_webshop_choose .logo{padding:50px 20px;text-align:center;}
.front_webshop_choose .logo img{height:200px;}
.front_webshop_choose .txt{padding:40px 60px;background:#fff;line-height:200%;color:#000;position:relative;min-height:400px;}
.front_webshop_choose .txt_price{padding:40px 60px;background:#fff;line-height:200%;color:#000;position:relative;min-height:480px;}
.front_webshop_choose .txt h4, .front_webshop_choose .txt_price h4{font-weight:700;font-size:2.4em;color:#333;}
.front_webshop_choose .txt .btn_a, .front_webshop_choose .txt_price .btn_a{position:absolute;bottom:50px;}
.front_webshop_choose .txt p, .front_webshop_choose .txt_price p {
  text-transform: uppercase;
  font-size: 13px;
  color: #e41a4f;
  letter-spacing: 2px;
}
.front_webshop_choose .txt img{width: 48px;height: 48px;margin-bottom:20px;}	
.front_webshop_choose .txt_price .price{font-weight:700;color: #e41a4f;font-size:2.6em;padding:20px 0px;}
	


/* parallax scrolling */
.pop_roll{
transition: transform 0.25s;
position:absolute;
z-index:100;
padding:20px 40px 20px 20px;
border-color:#e04002; border:0px;
background: #f54828; 
background: -moz-linear-gradient(-45deg, rgba(241,30,87,0.85) 0%, rgba(243,80,124,0.75) 100%);
background: -webkit-linear-gradient(-45deg, rgba(241,30,87,0.85) 0%,rgba(243,80,124,0.75) 100%); 
background: linear-gradient(135deg, rgba(241,30,87,0.85) 0%,rgba(243,80,124,0.75) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f54828', endColorstr='#f87638',GradientType=1 ); 
box-shadow: 0px 44px 74px rgb(0 0 0 / 15%);
border-radius: 20px;
}	
.pop_roll .img_thumb{float:left;}
.pop_roll .txt_pre{color:#f9dbd5; opacity: 1;font-weight:400;padding-left:50px;}
.pop_roll .txt{color:#fff;opacity: 1;font-weight:400;padding-left:50px;font-size:18px;}
.pop_roll .txt span{font-size:1.2em;font-weight:600;}


.pop_roll_white{
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 100%);
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.9) 100%); 
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.9) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f54828', endColorstr='#f87638',GradientType=1 ); 
}
.pop_roll_white .txt span{font-size:1.2em;font-weight:600;}


.pop_roll_circle{top:150px;left:0px;width:300px;height:300px;border-radius:150px;background:white;text-align:center;font-size:3em;padding-top:80px;font-weight:600;color:#000;} 

.pop_roll_hero_phone1{top:0px;left:calc(50% - 150px);min-width:380px;}
.pop_roll_hero_phone2{top:170px;left:calc(50% - 30px);min-width:330px;}
.pop_roll_hero_phone3{top:330px;left:calc(50% - 0px);min-width:330px;}
.pop_roll_hero_phone4{top:490px;left:calc(50% - 90px);}

/* parallax scrolling : end */


	
.parent:hover .child, .parent:focus .child {
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.bck_white{background:#ffffff;}
.bck_grey{background:#f4f4f4;}
.bck_pink{background:#d45a7a;}
.bck_purple{background:#391c4a;}
.bck_darkblue{background:#061a35;}
.bck_black{background:#333;}


.txt_purple{color:#795c8a}

.bck_logo_left{background:url(/img/devo_bck_logo.webp) no-repeat left center;}
.bck_logo_right{background:url(/img/devo_bck_logo_right_grey.webp) no-repeat right center;}

.centered{text-align:center;}



/* heros */
.hero_def{width:100%;height:800px;position:relative;}
.hero_front{background:  linear-gradient(-45deg,rgba(6,26,53,0.10),rgba(6,26,53,0.90)) fixed,url(/img/hero_bck021.jpg) no-repeat center center;background-size: cover; color:#FFFFFF;}
.hero_pricing{background:  linear-gradient(-45deg,rgba(6,26,53,0.10),rgba(6,26,53,0.90)) fixed,url(/img/hero_bck04.jpg) no-repeat center center;background-size: cover; color:#FFFFFF;}
.hero_dev{background:  linear-gradient(-45deg,rgba(6,26,53,0.10),rgba(6,26,53,0.90)) fixed,url(/img/hero_bck04.jpg) no-repeat center center;background-size: cover; color:#FFFFFF;}
.hero_app{background:  linear-gradient(-45deg,rgba(6,26,53,0.10),rgba(6,26,53,0.90)) fixed,url(/img/hero_bck_app.jpg) no-repeat top center;background-size: cover; color:#FFFFFF;}
.hero_coding{background:  linear-gradient(-45deg,rgba(6,26,53,0.10),rgba(6,26,53,0.90)) fixed,url(/img/hero_bck_coding.jpg) no-repeat center center;background-size: cover; color:#FFFFFF;}
.hero_magento{background:  linear-gradient(-45deg,rgba(6,26,53,0.10),rgba(6,26,53,0.90)) fixed,url(/img/hero_bck_magento3.jpg) no-repeat center center;background-size: cover; color:#FFFFFF;}
.hero_magentob2c{background:  linear-gradient(-45deg,rgba(6,26,53,0.10),rgba(6,26,53,0.90)) fixed,url(/img/hero_bck_magento4.jpg) no-repeat top center;background-size: cover; color:#FFFFFF;}

.hero_shopify{background:  linear-gradient(-45deg,rgba(6,26,53,0.10),rgba(6,26,53,0.90)) fixed,url(/img/hero_bck_shopify.jpg) no-repeat center center;background-size: cover; color:#FFFFFF;}
.hero_digitalstrategi{background:  linear-gradient(-45deg,rgba(6,26,53,0.10),rgba(6,26,53,0.90)) fixed,url(/img/hero_bck05.jpg) no-repeat center center;background-size: cover; color:#FFFFFF;}
.hero_karriere{background:  linear-gradient(-45deg,rgba(6,26,53,0.10),rgba(6,26,53,0.90)) fixed,url(/img/hero_karriere2.jpg) no-repeat center center;background-size: cover; color:#FFFFFF;}

.hero_adv1{background:  linear-gradient(-45deg,rgba(6,26,53,0.10),rgba(6,26,53,0.90)) fixed,url(/img/hero_adv01.jpg) no-repeat center center;background-size: cover; color:#FFFFFF;}
.hero_adv2{background:  linear-gradient(-45deg,rgba(6,26,53,0.10),rgba(6,26,53,0.90)) fixed,url(/img/hero_adv02.jpg) no-repeat center center;background-size: cover; color:#FFFFFF;}
.hero_adv3{background:  linear-gradient(-45deg,rgba(6,26,53,0.10),rgba(6,26,53,0.90)) fixed,url(/img/hero_adv03.jpg) no-repeat center center;background-size: cover; color:#FFFFFF;}
.hero_adv4{background:  linear-gradient(-45deg,rgba(6,26,53,0.10),rgba(6,26,53,0.90)) fixed,url(/img/hero_adv05.jpg) no-repeat center center;background-size: cover; color:#FFFFFF;}

.hero_def .txtbox_wrap { 
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	padding-left:50px;
	padding-right:50px;
}
.hero_def .txtbox_wrap div{display:block;}
.hero_def h1{font-size: 4.5em;color:#fff;}
.hero_def i{font-weight: 400;font-family: Georgia;font-size:1.1em;padding-right:10px;color:#eedab1;} /*#ff89a8*/
.hero_def p{margin-top:30px;color:#fff;font-size:2.5em;}

.hero_front_gfx_wrap{position:absolute;top:100px;right:240px;z-index:1;}
.hero_front_gfx1{position:absolute;top:150px;right:270px;}
.hero_front_gfx2{position:absolute;top:50px;right:0px;}

.hero_front_gfx_dot_inner{
	position:absolute;
	background: #e24373 linear-gradient(135deg, rgba(222,198,198,0.45) 0%,rgba(226,67,115,1) 100%);
	width:60px;height:60px;border-radius:50%;
	padding:17px 22px 22px 28px;
	color:#fff; font-size:1.2em;
}	
.hero_front_gfx_dot_outer{
	position:absolute;
	padding:15px;
	background: rgba(226,67,115,0.6);
	width:90px;height:90px;border-radius:50%;
	animation: pulse 3s infinite;	
}	
@keyframes pulse {
  0% {
      opacity: 1;
      transform: scale(1);
  }
  50% {
      opacity: 0;
      transform: scale(1.2);
  } 
  80% {
      opacity: 0;
      transform: scale(1.2);
  }
  100% {
      opacity: 0;
      transform: scale(1.2);
  }
}


.hero_about{background:  linear-gradient(-45deg,rgba(6,26,53,0.10),rgba(6,26,53,0.90)) fixed,url(/img/hero_about.jpg) no-repeat center center;background-size: cover; color:#FFFFFF;}
/* heros:end*/



.bck_def{width:100%;min-height:800px;position:relative;}
.bck_aboutus{background: url(/img/bck_about_us.jpg) no-repeat left center;background-size: contain;}
.bck_ipad{background: url(/img/bck_ipad_design.jpg) no-repeat center right;background-size: contain;}
.bck_magento{background: url(/img/bck_macbook_magento.jpg) no-repeat center right;background-size: contain;}
.bck_shopify{background: url(/img/bck_macbook_shopify2.jpg) no-repeat center right;background-size: contain;}
.bck_woocommerce{background: url(/img/bck_macbook_woocommerce.jpg) no-repeat center right;background-size: contain;}


.bck_right_height{min-height:1150px;}

.case_item{min-height:300px;}



.msgbox_green{background:#1dbf73;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding:20px 20px 20px 20px;text-align:left;}
.msgbox_red{background:#d00;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding:20px 20px 20px 20px;text-align:left;}
.msgbox_grey{background:#888;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding:20px 20px 20px 20px;text-align:left;}

.center_div_inside_div{position: absolute;left:010px;right:010px;margin-left: auto; margin-right: auto;}

.shopify_3themes_left{position: absolute;left:10px;width:800px;}
.shopify_3themes_right{position: absolute;right:10px;width:40%;}

.cursor_pointer{cursor:pointer;}





.contact_personal{padding-top:100px;}
.contact_personal .phone{font-size:2.2em;color: #e41a4f;margin-bottom:30px;}
.contact_personal .img_wrap{position:absolute;bottom:0px;margin:auto;left:0px;right:0px;}
.contact_personal table td{padding:0px;}
.contact_personal table{width:100%;}
.contact_personal .white_pad{margin-bottom:50px;}



/*------------ text - reveal---------------- */
:root{
    --bg-color: #ffffff;
}

.text-reveal h1 span{font-size: 2.2em;color:#333333;}
.text-reveal h2 span{color:#333333;}

/* title styles */
.reveal-title span{
    position: relative;
    overflow: hidden;
    display: block;
    line-height: 1.2;
	
}

.reveal-title span::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #333333;
    animation: a-ltr-after 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(-101%);
}

.reveal-title span::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    animation: a-ltr-before 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(0);
}

.reveal-title span:nth-of-type(1)::before,
.reveal-title span:nth-of-type(1)::after{
    animation-delay: 1s;
}

.reveal-title span:nth-of-type(2)::before,
.reveal-title span:nth-of-type(2)::after{
    animation-delay: 1.5s;
}

@keyframes a-ltr-after{
    0% {transform: translateX(-100%)}
    100% {transform: translateX(101%)}
}

@keyframes a-ltr-before{
    0% {transform: translateX(0)}
    100% {transform: translateX(200%)}
}








/* about us*/
.aboutus_hero{border:1px solid #e4e5e7;background:#f2f2f2;border-radius: 6px;padding:40px;margin:10px;text-align:center;font-size:18px;}
.aboutus_hero img{width:100px;height:100px;border-radius:50px;}
.aboutus_hero p{padding-top:12px;line-height:150%;}
.aboutus_hero b{color:#000;font-size:1.2em;}


/* skills */
.frontpage_skills_left{padding:50px 40px 50px 70px;}
.frontpage_skills_left h5{margin-top:15px;}
.frontpage_skills_left p{color:#000;padding-bottom:50px;}
.frontpage_skills_right{position:relative;}

									   
/* webshop_responsive */
.sec_webshop_responsive{position:relative;}
.sec_webshop_responsive .score_pad{
	background:rgba(255,255,255,1);padding:20px;width:200px;height:300px;border-radius: 12px;
	position:absolute;z-index:100;top:50px;left:300px;text-align:left;color:#a3a0b6;font-size:14px;
}
.sec_webshop_responsive .score_pad .hd{color:#000;font-weight:700;font-size:18px;padding:20px 0px 10px 0px;}	


/* PWA */
.fact_pad{padding:50px;color:#000;font-size:18px;color:#000;border-radius:6px;}
.fact_pad h4{font-weight:700;margin-bottom:30px;}


/* magento */
.magento_b2b_map{max-width:500px;max-height:500px;}


/* cases */
.cases_tag_topleft{position:absolute;top:30px;left:30px;z-index:1;}
.cases_tag_bottomleft{position:absolute;bottom:40px;left:30px;z-index:1;color:#fff;font-size:2.6em;font-weight:bold;padding-right:30px;}
.cases_pad_bck{position:relative;height:700px;background-position-x: center;background-position-y: center;
background-repeat:no-repeat;background-size: contain;cursor:pointer;}
.cases_pad_bck_big{position:relative;height:615px;}
.cases_pad_bck_big .hd{position:absolute;bottom:40px;color:#fff;padding:20px;font-size:4em;}

.infopage_image_max img{max-width:450px;margin: 0 auto;display: block;}

.portfolio_info{border-left:1px solid #e0e0e0;padding:40px;}
.portfolio_info .hd{font-size:0.8em;color:#aaa;}
.portfolio_info .hd_info{font-size:1.2em;color:#000;padding-bottom:20px;}
.portfolio_info .hd_info .tag{border-radius:50px;padding:5px 25px; background:#f4f4f4;margin:4px;float:left;font-size:0.8em;}
.portfolio_info .hd_info a{color:#000;text-decoration:underline;}
.portfolio_txtblock{padding-left:10%;padding-right:10%;padding-top:30px;padding-bottom:30px;color:#000;font-size:1.2em;}

/*  bullet list */
.pink_list ul {
  list-style: none;
}

.pink_list ul li::before {
  content: "\2022";
  color: #e41a4f;
  font-weight: 900;
  display: inline-block; 
  width: 1em;
  line-height:300%;

}
.pink_list li span {}


/* table */
.table_sp{width:100%;color:#000;}
.table_sp td, .table_sp th {
  border: 1px solid #ddd;
  padding: 16px;
}
.table_sp tr:nth-child(odd){background-color: #f4f4f4;}

.table_sp tr:hover {background-color: #ddd;}

.table_sp th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #f4f4f4;
  font-weight:900;
}


.contact-us{padding: 50px 50px 50px 50px;}
.contact-us input, .contact-us textarea {
background:#f4f4f4;
  border: 0;

  border-bottom: 2px solid #121217;
  font-size: 13px !important;
  font-weight: 600;
  padding-bottom: 15px !important;
  padding-top: 15px !important;
  margin-bottom: 25px !important;
  transition: border-bottom 0.2s linear;
  width: 100% !important;
  outline: 0;
}
.contact-us input:focus, .contact-us textarea:focus {
  border-bottom: 2px solid #e41a4f;
}
.contact-us .address{display:none;}
.contact-us .input-container {position: relative;}
.contact-us label {
	z-index: 10;
	position: relative;
	top: -120px;	
	color:#000;
	font-size: 0.8em;
	transition: all .2s ease; 
	font-weight:bold;
}
input[type="text"]:focus ~ label, input[type="text"]:valid ~ label {
  top: -90px;
  font-weight:normal;
}

.pricing-what{max-width:800px;padding:40px 0px;margin:auto;}


input:focus,select:focus,textarea:focus,button:focus {outline:none;outline: 0;}

/* ---------------------------------------*/
/* custom checkmark / radiobutton */
/* ---------------------------------------*/
.label_font{font-size:20px;}

.check_container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 18px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.check_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.check_checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 3px;
}

/* On mouse-over, add a grey background color */
.check_container:hover input ~ .check_checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.check_container input:checked ~ .check_checkmark {
  background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.check_checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.check_container input:checked ~ .check_checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.check_container .check_checkmark:after {
  left: 8px;
  top: 4px;
  width: 7px;
  height: 12px;
  border: solid #333;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



	
/* ----- radio ----------*/

.radio_container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 18px;
  cursor: pointer;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radio_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.radio_checkmark {
  position: absolute;
  top: 2;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border: 2px solid #333;
  border-radius: 50%;
}

.obj_centered{left: 50%;transform: translateX(-50%);}

/* On mouse-over, add a grey background color */
.radio_container:hover input ~ .radio_checkmark {
  background-color: #eee;
}

/* When the radio button is checked, add a white background */
.radio_container input:checked ~ .radio_checkmark {
  background-color: #fff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio_checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio_container input:checked ~ .radio_checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio_container .radio_checkmark:after {
  top: 6px;
  left: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #333;
}

/* ----- Toggle ----------*/
.toggle_switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.toggle_switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.toggle_slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .toggle_slider {
  background-color: #12cd4c;
}

input:focus + .toggle_slider {
  box-shadow: 0 0 1px #12cd4c;
}

input:checked + .toggle_slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
}

/* Rounded sliders */
.toggle_slider.round {
  border-radius: 24px;
}

.toggle_slider.round:before {
  border-radius: 50%;
}






/* no-gutters Class Rules */
.row.no-gutters {
   margin-right: 0;
   margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
   padding-right: 0;
   padding-left: 0;
}
.container-fluid {
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
}


.four-square ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  text-align: center;
  margin-top: 80px;
}
.four-square ul li {
  width: 48%;
  text-align: left;
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  border-bottom: 1px solid #D5D5D5;
  border-right: 1px solid #D5D5D5;
}
.four-square ul li .inner-wrapper {
	color:#000;
    max-width: 437px;
    margin: 0 auto;
    margin-bottom: 50px;
    margin-top: 50px;
    padding: 2rem;
}
.four-square ul li img{width:48px; height:48px;}
.four-square h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

/* pris beregner */
.pb_wrap{position:relative;padding:40px;margin:20px 0px 150px 0px;min-height:500px;}
.pb_opt{background:#fff;width:90%;margin:auto;padding:30px 30px;cursor:pointer;font-size:18px;color:#333;text-align:center;border:1px solid #ddd;border-radius:6px;vertical-align: middle;}
.pb_opt:hover{background:#f8f8f8;}
.pb_opt_initial{width:65%;margin:5px auto;}
.pb_opt_sel{border:2px solid #999;background:#f8f8f8;}
.pb_wrap .btn_prev{position:absolute;left:40px;bottom:40px;width:150px;}
.pb_wrap .btn_next{position:absolute;right:40px;bottom:40px;width:150px;}
.pb_wrap .error_txt{color:#e41a4f;margin:50px 0px;text-align:center;font-size:1.2em;font-weight:700;}
.pb_wrap h3{color:#333;font-size:1.8em;font-weight:700;margin-bottom:50px;}
.pb_wrap .pb_progress{position:absolute;margin:auto;width:500px;left:0px;right:0px;bottom:50px;text-align:center;}
.pb_wrap img{margin-bottom:20px;width:48px;height:48px;}
.pb_wrap .pb_progress .pb_progress_page{display: inline-block;border:1px solid #e41a4f;background:#e41a4f;width:60px;height:15px;margin:5px;}
.pb_wrap .pb_progress .pb_progress_remaining{display: inline-block;border:1px solid #ddd;background:#f8f8f8;width:60px;height:15px;margin:5px;}





/* buttons */
/*
a.bck_green:link,a.bck_green:visited,a.bck_green:active {color: #fff;text-decoration:none;}
*/
.btn, button {display: inline-block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: 6px;
	font-weight: 300;
	font-size: 16px;
	line-height: 100%;
	text-decoration: none;
	text-align: center;
	cursor: pointer;

}
.btn_black{background:#333;color:#fff;}
.btn_black_wrap a:hover{color: #ccc;}
.btn_pink{
	/*background:#e41a4f;*/
	background: #e41a4f linear-gradient(135deg, rgba(222,198,198,0.45) 0%,rgba(226,67,115,1) 100%);
	color:#fff !important;
	
}
.btn_darkblue{
	/*background:#e41a4f;*/
	background: linear-gradient(135deg, #052e65, #254eA5);
	color:#fff ;
	
}


.btn_outline{border: 1px solid #ccc;}
.btn_outline:hover{background:#f4f4f4;} /*/border: 1px solid transparent;*/
.btn_outline_white{border: 1px solid #fff;color:#fff;}


.btn_sm {padding: 7px 20px;}
.btn_lg {padding:12px 24px;font-size:1.4em;}


/* linkbarbottom */
.linkbarbottom{background:#333;color:#fff;padding:80px;margin:50px 50px;}
.linkbarbottom img{height:150px;margin:70px 0px;}
.linkbarbottom h4{color:white;}
.linkbarbottom p{padding-top:40px;font-size:18px;line-height:150%;}

/* footer */
#footer{padding:80px 10px;color:#7a7d85;border-top: 1px solid #e4e5e7;}
#footer .hd-link{font-weight: 700;margin-bottom: 4px;color: #333;font-size:1.2em;}
#footer ul {list-style: none;margin: 0;padding: 0px 0px 20px 0px;}
#footer li {margin-top: 5px;}
#footer li a {color: #333;font-size:0.9em;}
#footer li a:hover{color: #e41a4f ;}
#footer p {color: #666;padding:0px 0px 10px 0px;}
#footer .footer_logo{}
#footer a.someicon:link,a.someicon:visited,a.someicon:hover{background-repeat: no-repeat;padding:2px 0px 10px 45px;font-size: 1.6em;font-weight: 400;color:#fff}


/* cookie bar */
.cookie-bar{
	background-color: rgba(0,0,0,.75);
	position:fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;	
	color:#fff;
	padding:5px;
	z-index:9900;
	text-align:center;
	font-size: .85em;
	
}
.cookie-bar .cookie-txt{
	color: white;text-align:center;	padding: 10px;
	height:auto;
	margin: auto auto;
	position: relative;
}
.cookie-bar .cookie-txt .cookie-settings{color:#aaa; text-decoration: underline;cursor:pointer;}
.cookie-bar .btn_bar{width:150px;margin:4px 10px;color: white;}

.cookie_pop_faded{background:rgba(0,0,0,.75);width: 100%;
    height: 100%;left: 0;
    top: 0;	position: fixed;z-index:99998;
	display:none;
}
.cookie_pop{
	position:fixed;
	width:700px;
	height:400px;
	padding:30px;
	border-radius:8px;
	background:white;
	color:black;
	z-index:99999;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;	
}
.cookie_pop .set_wrap{border:1px #ddd solid;border-radius:4px;padding:12px;height:52px;}
.cookie_pop .set{float:left;display:inline-block;margin:2px;}
.cookie_pop .set span{padding:0px 15px 0px 5px;}
.cookie_pop .btn_wrap{padding:20px 0px 20px 0px;}
.cookie_pop .btn_size{width:150px;margin:5px 10px;}
/* cookie bar  :: end */



.my-error-class {color:#e41a4f !important;font-weight:600;font-size:14px;}
.my-valid-class {}





.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}


.topbar_filler{height:80px;} /* topbar: 139px*/





/* Menu topbar */
.topbar{padding:0px 0px;height:80px;position:fixed;z-index:9000;width:100%;} 

.topnav a {
  padding: 14px 15px;
  float: left;
  height:80px; 
}
.topnav .menuitem{

  color: #eee;
  text-align: center;
  padding: 25px 20px;
  text-decoration: none;
  font-size: 20px;
}
.topnav .menuitem_btn{

  padding: 18px 5px;
}


.topnav_arrow{top:34px;margin-left:5px;}	
/*
.topnav .menuitem:hover {color: #fff;border-bottom:3px solid #d45a7a;}
*/


	

.topnav-right {float: right; }


/* dropdown menu */


/* The container <div> - needed to position the dropdown content */
.dropdown, .menuitem_wrap {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {

	position: absolute;
	top:80px;
	left: calc(-300px + 50%);
	background-color: #fff;
	width: 600px;
	box-shadow: 0 -0.0625rem 1.0625rem -0.125rem #5e71774a;
	z-index: 9999;
	padding: 25px;
	border-radius:4px;
	color:#333;
	transition: opacity 0.5s ease-out;
	opacity: 1;
	display:none;
	
}


/* Links inside the dropdown */
.dropdown-content a {
  color: #333;
  padding: 12px 15px;
  text-decoration: none;
  display: block;
  height:auto;
  width:100%;
  
}
.dropdown:hover .dropdown-content {display:block;opacity: 1;}

.dropdown-content a svg{margin: 0 0.8rem 0 0;width: 24px;height: 24px;float:left;overflow:hidden;}
.dropdown-content a .nav-item-link{font-size:14px;font-weight:700;float:left;display:inline-block;padding-top:0px;}
.dropdown-content a .nav-item-link div{font-size:18px;font-weight:700;}

.dropdown-content a:hover {color: #e41a4f;}
.dropdown-content a:hover svg path, .dropdown-content a:hover svg polygon, 
.dropdown-content a:hover svg line, .dropdown-content a:hover svg polyline,
.dropdown-content a:hover svg rect, .dropdown-content a:hover svg circle{stroke: #e41a4f;}


.dropdown h5{font-weight:700;padding:5px 15px;}
/* dropdown menu :: end */






.logo_div{padding-top:8px;}
.logo_div img{height:34px;border:0px;}





.scrolled{background:#fff;transition: .1s all ease;box-shadow: 0 -0.0625rem 1.0625rem -0.125rem #5e71774a;}
.scrolled .topnav .menuitem_wrap a:link,.scrolled .topnav .menuitem_wrap a:visited,.topnav .nav-link .menuitem_wrap a:active {color: #000;}
.scrolled .navbar-nav li a{color: black;}
.scrolled .navbar-toggler span{color: black;}
.scrolled .navbar-toggler .icon-bar{background:black;}




/* Menu END */




.col-megamenu ul li{margin:16px 0px;font-size: 18px;}



.show_burger_menu{display:none;position:relative;}
.icon-bar{width:30px;display:block;background:#000;height:3px;margin:5px 0px; border-radius:1px;}

/* ====== The side navigation menu ====== */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #000; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a, .sidenav div {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #fff;
  display: block;
  transition: 0.3s;
  background-color:transparent;
  
}
.sidenav .indent{
	border-left: 20px solid transparent;
	border-bottom: 24px solid transparent;
	padding-left:32px;
	background: url(/img/arrow_right_white.png) no-repeat center  left;
}	

/* When you mouse over the navigation links, change their color */

.sidenav a:hover {color: #eee;}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {

}
/* ====== The side navigation menu :: END ====== */






@media (max-width: 1399px)  {


	
	.bck_right_height{min-height:900px;}
	
	.bck_ipad{background: url(/img/bck_ipad_design.jpg) no-repeat center  right;}

	.hero_front_gfx_wrap{position:absolute;top:100px;right:50px;}


	.shopify_3themes_right{width:40%;}
	
	.box_uink_big{position:relative;background:#e3e7eb;border-radius:50px;margin:30px;height:600px;overflow:hidden;}
	.box_uink_sml{position:relative;border-radius:50px;margin:30px;height:600px;overflow:hidden;}

	.portfolio_hbs{height:1800px;background:url(/img/portfolio_hbs_big.jpg) no-repeat top center; background-size:contain;}
	.portfolio_so{height:600px;background:url(/img/portfolio_so3.jpg) no-repeat top center; background-size:contain;}
	.portfolio_gr{height:600px;background:url(/img/portfolio_gr.jpg) no-repeat top center; background-size:contain;}

	.portfolio_npsyk{height:782px;background:url(/img/portfolio_npsyk.jpg) no-repeat top center; background-size:contain;}
}


/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {	

	.hide_md{display:none;}
	
	.topbar{padding:0px 10px;}	
	.topbar_filler{height:10px;}

	.logo_div {height:40px;}
	.logo_div img {height: 30px;margin-top:5px;}
	.h1_big{font-size: 3em;}
	
	.topnav-right {float: right; padding-right:5px;}
	.topnav .menuitem{padding: 25px 17px 25px 8px;font-size: 18px;}
	.topnav .menuitem_btn{padding: 18px 2px 18px 0px;}
	.topnav a {padding-left:2px;}
	.topnav_arrow{top:32px;}

	.sidenav a{padding-left:12px;}

	.front_case_ele {font-size: 1.6em;}
	
	.front_webshop_choose .txt{min-height:450px;}
	.front_webshop_choose .txt_price{min-height:530px;}
	

	

	.fact_pad {padding: 20px;}
	
	.pb_opt_initial{width:75%;}
	
	.sec_webshop_responsive .score_pad{left:200px;}	
	.magento_b2b_map{max-width:400px;max-height:400px;}
	
	.bck_right_height{min-height:800px;}
	.hero_front_gfx_wrap{display:none;}	
	
	.linkbarbottom{padding:50px;}
	.linkbarbottom img{height:100px;margin:70px 0px;}
	
	.bck_ipad{background: url(/img/bck_ipad_design2.jpg) no-repeat center right;}

	.shopify_3themes_left{display:none;} 
	.shopify_3themes_right{width:100%;    
		padding-right: calc(var(--bs-gutter-x) * .5);
		padding-left: calc(var(--bs-gutter-x) * .5);
	}

	.cookie-bar{height:60px;}
	.cookie-bar .btn_bar{width:100px;padding:12px;}
	.cookie_pop{width:100%;height:auto;margin:10px 0px;}
	.cookie_pop .btn_size{width:110px;}
	.cookie_pop .set_wrap{border:1px #fff solid;}	


	.box_uink_big{position:relative;background:#e3e7eb;border-radius:50px;margin:30px;height:500px;overflow:hidden;}
	.box_uink_sml{position:relative;border-radius:50px;margin:30px;height:450px;overflow:hidden;}
	.box_uink_txt{z-index:1;background:#fff;border-radius:30px;position:absolute;bottom:20px;right:20px;padding:20px 30px;width:300px;
		font-size:1.2em;font-weight:bold;color:#000;	
	}

	
	.box_uink_sml_bottom{padding-bottom:0px;}

	.portfolio_hbs{height:1800px;background:url(/img/portfolio_hbs_big.jpg) no-repeat top center; background-size:contain;}
	.portfolio_so{height:600px;background:url(/img/portfolio_so2.jpg) no-repeat top center; background-size:contain;}
	.portfolio_gr{height:600px;background:url(/img/portfolio_gr.jpg) no-repeat top center; background-size:contain;}
	.portfolio_npsyk{height:500px;background:url(/img/portfolio_npsyk.jpg) no-repeat top center; }


	.cases_tag_bottomleft{font-size:2em;}
	.cases_pad_bck{height:600px;}
	
	.pricecalc_warp_div{left:0;right:0;
		margin-left: auto;
		margin-right: auto;
		width: 440px;
		top:-30px;
	}

	/*
	.pricecalc_warp .hd_sec{padding-top:0px;padding-left:60px;margin-bottom:0px;font-size:1.5em;} 
	*/
	.pricecalc_warp .hd_sec h2{padding-top:10px;padding-bottom:10px;}

	.pricecalc_warp .greybar{border-left:1px solid #ffffff;padding-top:80px;}
	
	.pricecalc_warp h2 {font-size: 2.8em;}
	.pricecalc_warp h3 {font-size: 1.2em }	



}


/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {

	.show_burger_menu, .show_for_small_res{display:block;}
	.topbar{background:#fff;}
	.hide_sm{display:none;}
	.show_sm{display:block;}
	
	.linkbarbottom{padding:20px;margin:40px 10px;}

	.frontpage_skills_left{padding:50px 20px 50px 10px;}
	.txt-indent{padding-left:10px;padding-right:10px;}
	


	.contact_personal .white_pad{padding:20px 10px;}
	.front_webshop_choose .txt{min-height:450px;padding: 40px 20px;}
	.front_webshop_choose .txt_price{min-height:530px;padding: 40px 20px;}
	.front_webshop_choose .logo {padding: 50px 10px;}

	.box_uink_big{position:relative;background:#e3e7eb;border-radius:30px;margin:30px;height:500px;overflow:hidden;}
	.box_uink_sml{position:relative;border-radius:30px;margin:30px;height:600px;overflow:hidden;}
	.box_uink_txt{z-index:1;background:#fff;border-radius:50px;position:absolute;bottom:10px;right:10px;padding:20px 30px;width:250px;
		font-size:1.2em;font-weight:bold;color:#000;	6
	}
	.box_uink_sml_bottom{padding-bottom:0px;}

	.portfolio_hbs{height:1000px;background:url(/img/portfolio_hbs_big.jpg) no-repeat top center; background-size:contain;}
	.portfolio_so{height:800px;background:url(/img/portfolio_so2.jpg) no-repeat top center; background-size:contain;}
	.portfolio_gr{height:800px;background:url(/img/portfolio_gr.jpg) no-repeat top center; background-size:contain;}
	.portfolio_hd{padding-left:30px;}

	.pricecalc_warp {border-radius:8px;}

	
	.hero_wrap{height:390px;}

	.cookie-bar{height:110px;}
}



/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {



	html, body {font-size: 1em;}


	.show_burger_menu, .show_for_small_res{display:block;}
	.hide_sxm{display:none;}

	h1{font-size: 2.4rem;}
	h2{font-size: 2.4rem;}

	.text-reveal h1 span{font-size: 2.4rem;}

	.logo{max-height:22px;}
	.topbar_filler{height:80px;}
	.contact_personal .img_wrap{display:none;}
	
	.hero_wrap{height:480px;}

	.pricecalc_warp_div{width:300px;} 
	.pricecalc_warp .hd_sec{font-size:0.75em;padding-top:15px;} 

	.intro_logo-header{width:90%;}
	.intro_logo{width:100%;text-align:center;}
}





/*X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

	h1{0.8em;}
	
	.show_burger_menu, .show_for_small_res{display:block;}
	.hide_sx{display:none;}
	
	
	.logo_div img{height:25px;margin-top:20px;}
	.h1_big{font-size: 3em;}
	.mobile_bottompadding{padding-bottom:50px;}

	.hero_def .txtbox_wrap div{padding:5px;}
	.hero_def h1{font-size: 3.2em;}
	.hero_def p{font-size:2.0em;}

	
	.four-square ul li {width: 95%;border:0px;}
	
	.bck_ipad, .bck_magento, .bck_shopify, .bck_woocommerce, .bck_aboutus{background:#fff;}
	
	.fact_pad{padding:50px 10px;}
	.fact_pad ul{padding-left; 0px;}
	
	.navbar-collapse {
		overflow-y:visible;
		z-index:9999;
	}

	.collapse {
		display: block;
		background:#333;
		color:#fff;
	}

	.container {

		padding-right: 5px !important;
		padding-left: 5px !important;	
	}
	
	.contact-us{padding: 30px 12px;}
	.contact_personal .img_wrap{display:none;}
	

	.pb_wrap .pb_progress{display:none;}
	.pb_opt{margin:5px auto;}


	.box_uink_big{position:relative;background:#e3e7eb;border-radius:30px;margin:30px;height:250px;overflow:hidden;}
	.box_uink_sml{position:relative;border-radius:30px;margin:30px;height:300px;overflow:hidden;}
	.box_uink_txt{z-index:1;background:#fff;border-radius:50px;position:absolute;bottom:10px;right:10px;padding:20px 30px;width:250px;
		font-size:1.2em;font-weight:bold;color:#000;	
	}
	.box_uink_sml_bottom{padding-bottom:0px;}

	.portfolio_hbs{height:1600px;background:url(/img/portfolio_hbs_big.jpg) no-repeat top center; background-size:contain;}
	.portfolio_so{height:600px;background:url(/img/portfolio_so2.jpg) no-repeat top center; background-size:contain;}
	.portfolio_gr{height:600px;background:url(/img/portfolio_gr.jpg) no-repeat top center; background-size:contain;}

	.box_uink_kpi{padding:10px 20px;}
	.box_uink_kpi .img img{margin-top:5px;}
	.box_uink_kpi .img img{margin-top:5px;}
	.box_uink_kpi .txt{padding-left:50px;font-size:2em;font-weight:bold;color:#000;}
	.box_uink_kpi .txtsm{padding-left:50px;font-size:0.9em;font-weight:normal;color:#000;}
	
	.cookie-bar{height:130px;}
	.cookie-bar .btn_bar{width:125px;}
	
	.custom-select{width:145px;}
	.searchbox_input_size{width:300px;}
.searchbox_submit{width:200px;}
	
}














/* containers only :: X-Large devices (large desktops, less than 1400px)*/
@media (min-width: 1200px) {

	.container_full{max-width: 1550px;margin: auto;}
	.container{max-width: 1400px;}
	.hide_lg{display:none;}
}



@media (max-width: 767.98px) {
	.show_sxm{display:block;}
}


/* ======= topmenu:: mouseover ==========*/
@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .nav-link{   }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
}	
.navbar .megamenu{ padding: 1rem; }



/* ======= topmenu :: megamenu ==========*/
@media all and (min-width: 992px) {

  .navbar .has-megamenu{position:static!important;}
  .navbar .megamenu{left:0; right:0; width:100%; margin-top:0;  }

}	

@media(max-width: 991px){
  .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
    overflow-y: auto;
      max-height: 90vh;
      margin-top:10px;
  }
}





