/*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
/* reset */
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,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{	vertical-align:baseline;}/* vertical align baseline */
.vertical-top{	vertical-align:top;}/* vertical align top */
nav.vertical ul li{	display:block;}/* vertical menu */
nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
/****-----start-body----****/

@font-face{
	font-family: "Codystar-Regular";
	src:url(../fonts/Codystar-Regular.ttf);
}

@font-face{
	font-family: "Chivo-Regular";
	src:url(../fonts/Chivo-Regular.ttf);
}
@font-face{
	font-family: "BenchNine-Light";
	src:url(../fonts/BenchNine-Light.ttf);
}
body{
	background: url('../images/bg2.jpg') no-repeat 0px 0px;
	text-align: center;
	background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.main h1{
padding:50px 25px 180px 25px;
font-size:36px;
color:#fff;
font-family: "Codystar-Regular";
 -webkit-text-stroke: 1px #fff;
 
}

.wrap{
width:30%;
margin:0 auto;
}

.left-right{
position:relative;
}

.left-side{
width:70%;
}

.info{
padding:25px 50px;
border:10px solid #fff;
color:#fff;
font-family: "Chivo-Regular";
}

.info h3{
font-size:76px;
padding:10px 0;
border:5px #000;
border-top-style: dotted;
border-bottom-style: dotted;
}

.info h3 label{
font-size:34px;
}

.info h4{
font-size:26px;
padding:5px 0 15px 0;
}

.info h5{
font-size:18px;
padding-top:15px;
font-family: "BenchNine-Light";
letter-spacing: 3px;
}


.right-side{
width: 80%;
position: absolute;
top: -157px;
left: 195px;
}

/*--start-copyright--*/
.footer{
	text-align: center;
	margin-top:150px;
	padding:0px 25px 10px 25px;
}
.footer p{
	color:#fff;
	font-size: 14px;
	font-family: "Chivo-Regular";
	line-height:20px;
}
.footer p a{
	color:#C9C8CA;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.footer p a:hover{
	color:#fff;
}
/****-----end-copyright----****/


/* Code for Slider of images  */

.slider{
	position:relative;
}
.rslides {
  position: relative;
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
  }
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
.callbacks_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 22%;
  left: 0;
  opacity: 0.7;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("../images/themes.gif") no-repeat left top;
  
  }
.callbacks_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
 }
 

/*-- responsive media queries --*/ 

@media screen and (max-width:1920px){
.main h1{	
	padding-bottom:225px;	
}

.left-side {
	width: 60%;
}

.right-side {
    top: -188px;
}

.footer {
	margin-top: 300px;
}

.callbacks_nav {
    top: 40%;
}
}

@media screen and (max-width:1680px){
.left-side {
	width: 65%;
}
.right-side {
    top: -165px;
}
.footer {
	margin-top: 3300px;
}
}

@media screen and (max-width:1600px){
.left-side {
	width: 70%;
}
.right-side {
    top: -157px;
}
.footer {
	margin-top: 145px;
}
.callbacks_nav {
    top: 20%;
}
}

@media screen and (max-width:1440px){
.left-side {
	width: 78%;
}
.right-side {
    top: -157px;
	width: 88%;
}
.footer {
	margin-top: 200px;
}
.callbacks_nav {
    top: 35%;
}
}

@media screen and (max-width:1366px){
.main h1{	
	padding-top:25px;
	padding-bottom:175px;	
}
.left-side {
	width: 85%;
}
.right-side {
    top: -157px;
	width: 90%;
}
.footer {
	margin-top: 125px;
}
.callbacks_nav {
    top: 35%;
}
}

@media screen and (max-width:1280px){
.main h1{	
	padding-top:25px;
	padding-bottom:175px;	
}
.left-side {
	width: 88%;
}
.right-side {
    top: -157px;
	width: 100%;
}
.footer {
	margin-top: 150px;
}
.callbacks_nav {
    top: 35%;
}
}

@media screen and (max-width:1080px){
.main h1{	
	padding-bottom:150px;	
}
.left-side {
	width: 90%;
}
.right-side {
    top: -115px;
	left: 175px;
	
}
.footer {
	margin-top: 95px;
}
.callbacks_nav {
    top: 35%;
}
.info {
    padding: 20px 30px;
}

.info h3{
font-size:70px;
}

.info h3 label{
font-size:30px;
}

.info h4{
font-size:20px;
padding:5px 0 10px 0;
}

.info h5{
font-size:13px;
padding-top:15px;

}
}

@media screen and (max-width:1050px){
.main h1{
	font-size:32px;
	padding-bottom:130px;	
}

.right-side {
    top: -129px;
	left: 170px;
	
}
.footer {
	margin-top: 100px;
}
.callbacks_nav {
    top: 30%;
}

.info h3{
font-size:62px;
padding:7px 0;
}

.info h3 label{
font-size:24px;
}

}

@media screen and (max-width:1024px){

.right-side {
    top: -124px;
	left: 170px;}
}

@media screen and (max-width:991px){

.right-side {
    top: -120px;
	left: 165px;}
}


@media screen and (max-width:800px){
.wrap {
    width: 37%;}

.info h3{
border:3px #000;
border-top-style: dotted;
border-bottom-style: dotted;}

.left-side {
	width: 90%;}
.right-side {
    top: -120px;
	left: 160px;}
.footer {
	margin-top: 100px;
}
.footer p{
	font-size: 13px;}
}

@media screen and (max-width:768px){
.right-side {
    top: -116px;
	left: 155px;}
}

@media screen and (max-width:736px){
.wrap {
    width: 39%;}
.footer {
	margin-top: 105px;
}
}

@media screen and (max-width:667px){
.wrap {
    width: 54%;}
.left-side {
	width: 78%;}
.right-side {
   	width:86%;
	top: -124px;
	left: 165px;}

}

@media screen and (max-width:640px){
.wrap {
    width: 60%;}
.left-side {
	width: 70%;}
.right-side {
   	width:79%; }
}

@media screen and (max-width:600px){
.wrap {
    width: 64%;}
}

@media screen and (max-width:480px){

.main h1{
	font-size:30px;
	padding-bottom:125px;	
}
.left-side {
	width: 64%;
}
.right-side {
    top: -100px;
	left: 110px;
	width:80%;
}


.info {
    padding: 15px 20px;
	border:7px solid #fff;
}

.info h3{
	font-size:50px;
	padding:5px 0;
}

.info h3 label{
	font-size:24px;
}

.info h4{
	font-size:18px;
	padding:5px 0 ;
}

.info h5{
	padding-top:10px;
}
.footer {
    margin-top: 90px;
}
}

@media screen and (max-width:414px){
.wrap{
	width:66%;
}

.main h1{
	font-size:26px;
	padding-bottom:125px;	
}
.left-side {
	width: 68%;
}
.right-side {
    top: -95px;
	left: 105px;
	width:84%;
}

.footer {
    margin-top: 75px;
	
}
}

@media screen and (max-width:384px){
.wrap{
	width:70%;
}

.main h1{
	font-size:24px;
	padding-bottom:125px;	
}
.left-side {
	width: 66%;
}
.right-side {
    top: -93px;
	left: 98px;
}

.footer {
    margin-top: 75px;
	
}
}

@media screen and (max-width:320px){
.wrap{
	width:72%;
}

.main h1{
	font-size:20px;
	padding-bottom:50px;	
}
.left-side {
	width: 64%;
}
.right-side {
    top: -15px;
	left: 76px;
}

.footer {
    margin-top: 60px;
}

.info {
    padding: 15px;
	border:5px solid #fff;
}

.info h3{
	font-size:40px;
	padding:5px 0;
}

.info h3 label{
	font-size:18px;
}

.info h4{
	font-size:14px;
	padding:5px 0 ;
}

.info h5{
	padding-top:10px;
}
}