@charset "utf-8";
/* CSS Document */
body {margin:0 auto;}
#services, footer {padding:25px 0;}

/*......///header///......*/
header {background-color:#426eb2; padding:6px 0;}
header li {list-style:none; display:inline; padding:0 5px;}
header li a {color:#fff; margin:0 3px; position:relative;}
header li a:hover {color:#000;}

.imedia {height:25px; width:25px; background-repeat:no-repeat; background-size:cover; float:right; margin:0 3px;}
.facebook {background-image:url(../images/facebook.png);}
.twitter {background-image:url(../images/twitter.png);}
.google {background-image:url(../images/google.png);}

.blink {color: #fff !important; background:#ed1f24 !important;}

/*...banner...*/
#bnnr .dark-lay {position:absolute; height:100%; width:100%; background-color:rgba(0,0,0,0.3); z-index:9;}
#bnnr img {width:100%; z-index:8; position:relative;}

#bnnr .carousel-indicators {left:22% !important; bottom:16%;}
#bnnr .carousel-indicators li {width:4%!important; height:4px!important; border-radius:0!important; border:none!important; background-color:#FFF!important;}
#bnnr .carousel-indicators .active {background-color:#ed1f24!important; width:8%!important; top:-1px!important; position:relative!important;}

#bnnr .carousel-caption {text-align:left; left:15%; bottom:23%;}
#bnnr .carousel-caption h2, h1 {margin:0; text-shadow:rgba(0,0,0,0.5)2px 2px 10px;}
#bnnr .carousel-caption h1 {font-size:50px; color:#ed1f24; font-family: 'Anton', sans-serif; margin-bottom:-2px;}
#bnnr .carousel-caption h1 span {color:#FFF;}
#bnnr .carousel-caption h2 {font-family: 'Anton', sans-serif !important; font-size:34px; color:#FFF!important;;}
#bnnr .carousel-caption .fnds {font-size:30px; color:#FFF; font-family: 'Raleway', sans-serif; margin:10px 0 0;}
#bnnr .carousel-caption p {padding:0 0 12px 0;}
#bnnr .carousel-caption a {background-color:#ed1f24; color:#fff; text-shadow:none !important; transition:all 0.5s; border-radius:4px; padding:10px;}
#bnnr .carousel-caption a:hover {text-decoration:none; background-color:#000; color:#fff;}
#bnnr .carousel-control {width:7%;}
#bnnr .carousel-control .slider-left, .slider-right {top:45%; height:40px; width:40px; position:absolute; background-repeat:no-repeat; background-size:contain;}
#bnnr .carousel-control .slider-left {background-image:url(../images/slider-left.png); left:30px;}
#bnnr .carousel-control .slider-right {background-image:url(../images/slider-right.png); right:30px;}


/*///wrapper///*/
.wrppr1, .wrppr2 {background-image:url(../images/wrppr1.png); background-repeat:no-repeat; background-size:contain; height:60px; width:100%; position:absolute; }
.wrppr1 {margin-top:70px;}
.wrppr2 {transform:scale(-1,-1); margin-top:-60px;}

/*///----services----///*/
.heading {margin:30px 0 15px; display:block;}
.heading h1 { padding:0; text-shadow:none; color:#333; margin:0 auto; font-family: 'Anton', sans-serif;
}

#services {background-color:#000;}
#services .serv-box {height:auto; padding:10px 0;}
#services .shadow {box-shadow:0 2px 6px rgba(0,0,0,.175); background-color:#ed1f24; padding:25px 15px; cursor:pointer; transition:0.5s; margin:25px 0; border-radius:10px;}
#services .serv-box h3 {color:#000; font-size:20px;}
#services p {padding:0 0 15px; color:#fff;}
#services .icon {display:block; height:auto;}
#services .icon .icn-bx {background-repeat:no-repeat; cursor:pointer; margin:0 auto; background-size:cover; height:80px; width:80px; transition:0.9s; border-radius:100%;}
#services .shadow:hover .icn-bx {transform:rotate(360deg); box-shadow:1px 2px 5px 1px rgba(51,51,51,0.4); filter:grayscale(0%);}
#services .shadow:hover {box-shadow:0 4px 10px rgba(0,0,0,0.5);}

#services .icn-bx1 {background-image:url(../images/icon-bpo.png);}
#services .icn-bx2 {background-image:url(../images/icon-web-dev.png);}
#services .icn-bx3 {background-image:url(../images/icon-graph.png);}

/*////-----welcom to sanpak-----////*/
#about {padding:25px 0 80px; text-align:center; background-color:#CFCFCF;}
#about p {padding:5px 5px 15px; color:#333; font-size:16px; text-align:center;}
#about a, #services a {padding:8px 18px; border-radius:5px; position:relative; background-color:#000; color:#fff; border:1px solid #fff !important; transition:1s;}
#about a:hover, #services a:hover {text-decoration:none; background-color:#4572b8; color:#fff;}
#about .bpo-ser {background-color:#EFEFEF; padding:25px; margin:5px 0;}
#about .bpo-box {margin:15px 0 0;}
#about .bpo-box a {display:block; margin:5px;}

/*///---bttm---///*/
#bttm {padding:35px 15px; background-color:#CCC; background-image:url(../images/stiker.png); }
#bttm p {font-size:24px; color:#484d52; font-family: 'Muli', sans-serif;}
#bttm span {color:#4572b8}

/*///address///*/
#add {padding:20px 0 80px; background-image:url(../images/webkey.jpg); overflow:hidden;}
#add .add-box i {font-size:50px; border-radius:100%; position:relative; top:30px; background-color:#ed1f24; color:#fff; height:80px; width:80px; padding:15px 0 0;}
#add .add-box {height:auto;  width:100%; text-align:center; margin:5px 0;}
#add .add-box p {font-size:18px; padding:40px 10px 15px; background-color:#FFF; border-radius:10px;}
#add .add-box p a {color:#000;}

/*///....Footer....///*/
footer {background-color:#ed1f24; padding:0; margin:0;}
footer .ft-box {padding:5px 15px; margin:35px 0 0;}

footer h4 {color:#000; text-transform:uppercase; margin-left:-31px; position:relative;}
footer ul {list-style:none;}
footer ul li {position:relative; margin-left:-68px;}
footer ul li a {color:#fff; display:block; padding:5px; margin:0; font-size:14px;}
footer ul li a:hover {text-decoration:none;}
footer ul li i {float:left; margin:8px 8px 0 0; color:#000}

footer .medias li a {float:left; border:none; padding:5px 3px;}

footer .map {margin:10px 0; padding:6px 0 25px; height:150px; right:30px; position:relative;}
footer .map iframe {width:100%; height:100%;}

footer .tc {padding:10px 0;}
footer .tc a {color:#000;}

footer .cprght {background-color:#000; padding:5px;}
footer .cprght p {margin:0; color:#fff; text-align:center; font-size:14px;}

/*///----offer----///*/
#offer {padding:30px 0; background-color:#e9ebec;}
#offer h4 {color:#2eb3f3;}
#offer h3 {color:#0e2e45; text-transform:uppercase;}
#free h2 {color:#fff; text-transform:uppercase;}
#free {background-color:#2eb3f3; padding:10px 0;}
#free a {padding:10px 15px; border-radius:3px; top:14px; position:relative; float:right; color:#2eb3f3; background-color:#fff; text-transform:uppercase; transition:0.5s;}
#free a:hover {text-decoration:none; background-color:#0e2e45;}

/*////----form-web----////*/
h3 {color:#ed1f24;}
.frm-box h3 {text-align:center; }
.frm-box h4 {border-bottom:1px solid #4874b9; padding:5px 0 15px;}
.frm-box p {color:#4874b9; font-size:17px; text-align:center;}
.frm-box {padding:20px 40px 70px; box-shadow:1px 1px 2px 1px rgba(102,102,102,0.98); background-color:#F8F8F8;}
input, select {height:25px; padding:2px 5px;}
button {padding:6px 30px; border-radius:4px; margin-top:15px; background-color:#ed1f24; border:none; color:#FFF; transition:0.5s;}
button:hover {background-color:#000;}
#chk {height:26px; top:-2px; position:relative; width:25%;}
#name, #country, #country2, #state { box-shadow:1px 1px 3px rgba(102,102,102,0.4)}

.check input[type="checkbox"] {padding:5px; margin:5px 5px 0 30px; top:7px; position:relative;}
.check input[type="radio"] {padding:5px; margin:5px 6px 0 30px; top:7px; position:relative;}

#fax {display:none;}


/*///graphics-design///*/
#bttm-line {background-color:#0e2e45; padding:25px 10px; background-image:url(../images/btm-line.png); background-attachment:fixed;}
#bttm-line h3 {color:#fff;}
#bttm-line li {padding:5px; font-size:17px; color:#2EB3F3;}

/*///portfolio///*/
/*#portfolio {padding:25px 0; height:auto;}
#portfolio .carousel-inner {background-color:#FFC; box-shadow:rgba(0,0,0,0.5)1px 2px 5px 1px; width:80%; margin:0 auto; border-radius:10px;}
#portfolio .webimg, .webinfo {margin:10px 0;}
#portfolio .webimg img {padding:10px 0; width:100%;}
#portfolio .webinfo {padding:2px;}

#portfolio .carousel-control {background-image:none;}
#portfolio .carousel-control .glyphicon-chevron-right, .carousel-control .glyphicon-chevron-left, .carousel-control .icon-next, .carousel-control .icon-prev {background-color:#666; font-size:18px; line-height:28px; border-radius:100%;}
*/
/*////captcha////*/
.captcha {width:60px; background-image:url(../images/cat.png); font-size:20px; border: 1px solid;}
.color {color:#FF0000;}

/*///P&P and T&C///*/
#tcbox {background-color:#fff; padding:25px 10px 80px;}
#tcbox .tcpp h4 {color:#ed1f24; text-align:left; margin:12px 0; font-family: 'PT Sans', sans-serif;}
#tcbox .tcpp h3 {color:#000; text-align:left; margin:10px 0; font-family: 'PT Sans', sans-serif;}
#tcbox .tcpp p {text-align:left; padding:0 0 10px; color:#666; margin:0; font-family: 'PT Sans', sans-serif; font-size:16px;}
#tcbox .tcpp li {font-family: 'PT Sans', sans-serif; font-size:16px;}


/*///....@media....///*/

@media only screen and (max-width:991px) {
	#bnnr .carousel-indicators {bottom:14%;}
	#bnnr .carousel-caption {bottom:20%;}
	#bnnr .carousel-caption h1 {font-size:50px;}
	#bnnr .carousel-caption h2 {font-size:30px;}
	#bnnr .carousel-caption .fnds {font-size:25px; margin:5px 0 0;}
	header li a i {margin:5px !important;}
}

@media only screen and (max-width:767px) {
	#name, #message {width:100%;}
	.wrap {padding:10px 0;}
	.offs {padding:0px 5px 30px;}
	#free a {float:none;}
	footer .ft-box {margin:40px 40px 0;}
	#bnnr .carousel-indicators {bottom:6%;}
	#bnnr .carousel-caption {bottom:16%;}
	#bnnr .carousel-caption h1 {font-size:35px;}
	#bnnr .carousel-caption h2 {font-size:23px;}
	#bnnr .carousel-caption .fnds {font-size:20px; margin:0;}
	#bnnr .carousel-caption p {font-size:14px;}
	#bnnr .carousel-control .slider-left, .slider-right {height:30px; width:30px;}
}


@media only screen and (max-width:678px) {
	#about p {text-align:center;}
	#about, #services {padding:0 5px 50px;}	
	#bnnr .carousel-indicators {left:22.5% !important;}
	#bnnr .carousel-caption p {padding:5px 0;}
	footer .cmpn img {padding:5px 0; width:200px;}
	header li {padding:0;}
	.imedia {float:left; left:0; height:18px; width:18px; position:relative;}
}

@media only screen and (max-width: 600px) {	
	.heading h1 {font-size:32px;}
	.heading h3 {padding:0 8px;}
	h3 {font-size:22px;}
	#bnnr .carousel-indicators {bottom:8%;}
	#bnnr .carousel-caption {bottom:14%;}
	#bnnr .carousel-caption p {font-size:10px;}
	#bnnr .carousel-caption h1 {font-size:30px;}
	#bnnr .carousel-caption h2 {font-size:20px;}
	#bnnr .carousel-caption .fnds {font-size:18px; margin:0;}
	#bnnr .carousel-caption .bttn1 {padding:8px; font-size:10px; top:0;}
	#about a {display:table; margin:0 auto;}
	#bnnr .carousel-caption a {padding:6px; font-size:10px;}
	.wrppr1 {margin-top:66px;}
	}
	
@media only screen and (max-width: 500px) {	
	#bnnr .carousel-indicators {bottom:3%;}
	#bnnr .carousel-caption {bottom:10%;}
	#bnnr .carousel-caption h1 {font-size:18px;}
	#bnnr .carousel-caption h2 {font-size:12px!important; margin:2px 0 0;}
	#bnnr .carousel-caption p {padding:2px 0;}
	#bnnr .carousel-caption .fnds {font-size:12px;}
	.heading h1 {font-size:24px;}
	.heading h3 {font-size:18px;}
	#about p {text-align:justify;}
	#add .add-box p {font-size:14px; padding:30px 7px 10px;}
	}

@media only screen and (max-width:520px) {
	.heading h2 {font-size:26px;}
	#about .abt-box {text-align:center;}
	#about .abt-box p {padding:5px 4px;}
	#about .bpo-ser {padding:14px;}
	#about {padding:3px 3px 40px;}
	#webtype, #pic {width:99%;}
	.frm-box {padding:20px 20px 30px; margin:25px 0;}
	.frm-box h3 {font-size:20px}
	.frm-box p {font-size:15px;}
	#banner .carousel-caption h1 {font-size:24px;}
	
}


@media only screen and (max-width:414px) {
	.heading h2 {font-size:24px;}
	.check input[type="checkbox"] {margin:5px 5px 0 10px;}
	.check input[type="radio"] {margin:5px 6px 0 10px;}
	#country, #country2 {width:99%;}
	#bnnr .carousel-caption  {display:none;}
	#bnnr .carousel-control .slider-left, .slider-right {height:20px; width:20px;}
	#bttm p {font-size:18px;}
}


/*////----preloader----////*/
.preloader {width: 70px; height: 70px; top: 44%; margin:0 auto; position:relative;}
.spinner {
  width: 70px;
  height: 70px;
  background-image:url(../images/preloader.png);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  margin:0 auto;
  position:relative;
 
		-webkit-animation: rotation 3s infinite linear;
}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}

.spinner-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255,255,255,1);
z-index: 999999;
}

.slogo {height:70px; width:70px; background-image:url(../images/silogo.png); background-repeat:no-repeat; background-position:center; margin:0 auto; position:absolute;}