/*@charset "utf-8";
 CSS Document */
/*
.preload-01 { background: url(../projects/websites/images/vgk.png) display:none; }  
.preload-02 { background: url(/websites/images/vegasautorepair.png) display:none; }  
.preload-03 { background: url(/websites/images/vegastruckrepair.png) display:none; }
.preload-04 { background: url(/websites/images/signaturestone.png) display:none; }
.preload-05 { background: url(/websites/images/sc.png) display:none; }
*/

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
/*
body {
	background-image: url("../images/bkg.png");
    font-family: "Lusitana", sans-serif;
	color:#545F63;
	background-position: -5px -5px;
	background-repeat: repeat-y;
	animation: animatedBackground 30s linear infinite alternate;
}

@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 100%; }
}

*/



.centered {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

	.content {
		position:relative;
		top:200px;
		margin:auto;
	}



/*
p {
  font-size: 20px;
  line-height: 28px;
  margin: 0 0 18px;
}*/

h1 {
    font-weight: normal;
    text-align: center;
	margin:0px;
	font-size: 8em;
	text-transform:uppercase;
}

h2 {
  font-size: 2.6em;
  font-weight: normal;
  text-align: center;
}

h3 {
  font-weight: normal;
	font-size:2em;
	margin:0px;
	line-height:1em;
}

hr {
	height:0; 
    border:0;
	border-top: 1px solid #545F63;
}

a:link, a:visited {
	color: #678B87;
	text-decoration: none;
}

a:hover {
	color: #758A87;
	text-decoration: underline;
}


/* xxx */


		



/* ++++++++++++++ Navigation +++++++++++++++ */

/* ---- angle ----- */	
.menu-toggle {
	z-index:21;
    position:fixed;
    width: 100px;
    height: 100px;
	top:0px;
	right:0px;
	cursor: pointer;
}
		
.menu-toggle div {
	background-position: top right;
    position:absolute;
    width: 100%;
    height: 100%;
	background-size: cover;
}

.angle1 {
    background: url("../images/menu/angle1.png") no-repeat;
	animation: angle1 0.8s infinite;
}
		
.angle2 {
    background: url("../images/menu/angle2.png") no-repeat;
	animation: angle2 0.8s infinite;
}
		
.angle3 {
    background: url("../images/menu/angle3.png") no-repeat;
	animation: angle3 0.8s infinite;
}
		
.angle4 {
    background: url("../images/menu/angle4.png") no-repeat;
	animation: angle4 0.8s infinite;
}

.cross {
    background: url("../images/menu/cross.png") no-repeat;
	display:none;
	background-size: cover;
}
		
		
@-webkit-keyframes angle1 {
  0%   { opacity: 100; }
  20%   { opacity: 0; }
  40%   { opacity: 0; }
  60% { opacity: 0; }
  80%   { opacity: 0; }
  100% { opacity: 0; }	
}
		
@-webkit-keyframes angle2 {
  0%   { opacity: 0; }
  20%   { opacity: 100; }
  40%   { opacity: 0; }
  60% { opacity: 0; }
  80%   { opacity: 0; }
  100% { opacity: 100; }	
}		
		
@-webkit-keyframes angle3 {
  0%   { opacity: 0; }
  20%   { opacity: 0; }
  40%   { opacity: 100; }
  60% { opacity: 0; }
  80%   { opacity: 100; }
  100% { opacity: 0; }	
}
		
@-webkit-keyframes angle4 {
  0%   { opacity: 0; }
  20%   { opacity: 0; }
  40%   { opacity: 0; }
  60% { opacity: 100; }
  80%   { opacity: 0; }
  100% { opacity: 0; }	
}
	
/* ---- angle ends ----- */




/* --- navigation animated on the orage background ---- */
nav {
  z-index: 20;
  position: fixed;
  top: -100%; /* hidden */
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
	text-align:center;
}

nav:before {
  content: '';
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: #ff6600;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 100%;
  -webkit-transform: scale(0.04), translateY(9999px);
          transform: scale(0.04), translateY(9999px);
	
  -webkit-animation: hide-animation 0.8s ease-out forwards;
          animation: hide-animation 0.8s ease-out forwards;

}

.open nav {
  top: 0;
}
.open nav:before {
  -webkit-animation: show-animation 0.8s ease-out forwards;
          animation: show-animation 0.8s ease-out forwards;

}




nav .menu {  
        top: 100px;
        /*left: calc(50vw - (520px / 2));
        position: fixed;*/
        margin:auto;
	    margin-top: 100px;
}



nav .menu li {
	opacity:0%;
	margin:auto;
	display:block;
	width: 520px;
	height:90px;
	margin-bottom:15px;
}
		
nav .menu li a {
	position:absolute;
	display:block;
	width:520px;
	height:90px;
	background-size: contain;
} 

		
.home { background: url("../images/menu/home.png") no-repeat; }
.home1 { background: url("../images/menu/home1.png") no-repeat; }
		
.websites { background: url("../images/menu/websites.png") no-repeat; }
.websites1 { background: url("../images/menu/websites1.png") no-repeat; }
		
.graphics { background: url("../images/menu/graphics.png") no-repeat; }
.graphics1 { background: url("../images/menu/graphics1.png") no-repeat; }

.posters { background: url("../images/menu/posters.png") no-repeat; }
.posters1 { background: url("../images/menu/posters1.png") no-repeat; }
		
.animation { background: url("../images/menu/animation.png") no-repeat; }
.animation1 { background: url("../images/menu/animation1.png") no-repeat; }
		
.photo { background: url("../images/menu/photo.png") no-repeat; }
.photo1 { background: url("../images/menu/photo1.png") no-repeat; }	

.youtube { background: url("../images/menu/youtube.png") no-repeat; }
.youtube1 { background: url("../images/menu/youtube1.png") no-repeat; }

.contact { background: url("../images/menu/contact.png") no-repeat; }
.contact1 { background: url("../images/menu/contact1.png") no-repeat; }

	

.nav_img {
    -webkit-animation: blink_nav1 0.2s alternate infinite; /* Safari 4+ */
    -moz-animation:    blink_nav1 0.2s alternate infinite; /* Fx 5+ */
    -o-animation:      blink_nav1 0.2s alternate infinite; /* Opera 12+ */
    animation:         blink_nav1 0.2s alternate infinite; /* IE 10+ */
}	
.nav_img1 {
	opacity:0;
    -webkit-animation: blink_nav 0.2s alternate infinite; /* Safari 4+ */
    -moz-animation:    blink_nav 0.2s alternate infinite; /* Fx 5+ */
    -o-animation:      blink_nav 0.2s alternate infinite; /* Opera 12+ */
    animation:         blink_nav 0.2s alternate infinite; /* IE 10+ */
}
		
		
@-webkit-keyframes blink_nav {
  0%   { opacity: 0; }
  100% { opacity: 100; }
}
@-moz-keyframes blink_nav {
  0%   { opacity: 0; }
  100% { opacity: 100; }
}
@-o-keyframes blink_nav {
  0%   { opacity: 0; }
  100% { opacity: 100; }
}
@keyframes blink_nav {
  0%   { opacity: 0; }
  100% { opacity: 100; }
}

		
		
@-webkit-keyframes blink_nav1 {
  0%   { opacity: 100; }
  100% { opacity: 0; }
}
@-moz-keyframes blink_nav1 {
  0%   { opacity: 100; }
  100% { opacity: 0; }
}
@-o-keyframes blink_nav1 {
  0%   { opacity: 100; }
  100% { opacity: 0; }
}
@keyframes blink_nav1 {
  0%   { opacity: 100; }
  100% { opacity: 0; }
}		




.open ul.menu li {

  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
  transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
	
	animation: show_nav 0.5s forwards;
	animation-delay: 1s;
		
}

@-webkit-keyframes show_nav {
 0% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}



article {
  width:95%;	
  text-align:center;
  margin: auto;	
  margin-top:40px;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  z-index:10;
}

.open article {
  -webkit-transform: scale(0.92);
          transform: scale(0.92);
  -webkit-transition: -webkit-transform 0.2s 0.41s ease-out;
  transition: -webkit-transform 0.2s 0.41s ease-out;
  transition: transform 0.2s 0.41s ease-out;
  transition: transform 0.2s 0.41s ease-out, -webkit-transform 0.2s 0.41s ease-out;
  z-index:0;
}



@-webkit-keyframes show-animation {
 0% {
    opacity: 0;
    transform: scale(0.04)
    translateY(300%);
  }
  40% {
    transform: scale(0.04)
               translateY(0);
    transition: ease-out;
  }
  40% {
    transform: scale(0.04)
               translateY(0);
  }
  60% {
    opacity: 1;
    transform: scale(0.02)
               translateY(0px);
  }
  61% {
    transform: scale(0.04);
  }
  99.9% {
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%;
  }
  100% {
    transform: scale(2);
    height: 100%;
    padding-bottom: 0;
    border-radius: 0;
  }	
}


@keyframes show-animation {
0% {
	top:0px;
    opacity: 0;
    transform: scale(0.04)
    translateY(300%);
  }
  40% {
    transform: scale(0.04)
               translateY(0);
    transition: ease-out;
  }
  40% {
    transform: scale(0.04)
               translateY(0);
  }
  60% {
    opacity: 1;
    transform: scale(0.02)
               translateY(0px);
  }
  61% {
    transform: scale(0.04);
  }
  99.9% {
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%;
  }
  100% {
    transform: scale(2);
    height: 100%;
    padding-bottom: 0;
    border-radius: 0;
  }	
}







@-webkit-keyframes hide-animation {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    height: 100%;
    padding-bottom: 0;
    border-radius: 0;

  }
  40% {
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%;

  }
  40% {
    -webkit-transform: scale(0.04);
            transform: scale(0.04); 

  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.02) translateY(0px);
            transform: scale(0.02) translateY(0px);
  }
  61% {
	  
    -webkit-transform: scale(0.04) translateY(0);
            transform: scale(0.04) translateY(0);
  }
  99.9% {
	  
    -webkit-transform: scale(0.04) translateY(0);
            transform: scale(0.04) translateY(0);
    -webkit-transition: ease-out;
    transition: ease-out;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.04) translateY(300%);
            transform: scale(0.04) translateY(300%);
top:-100%;
	}
}

@keyframes hide-animation {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    height: 100%;
    padding-bottom: 0;
    border-radius: 0;

  }
  40% {
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%;

  }
  40% {
    -webkit-transform: scale(0.04);
            transform: scale(0.04); 

  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.02) translateY(0px);
            transform: scale(0.02) translateY(0px);
  }
  61% {
	  
    -webkit-transform: scale(0.04) translateY(0);
            transform: scale(0.04) translateY(0);
  }
  99.9% {
	  
    -webkit-transform: scale(0.04) translateY(0);
            transform: scale(0.04) translateY(0);
    -webkit-transition: ease-out;
    transition: ease-out;
  }
  100% {
    opacity: 0;

    -webkit-transform: scale(0.04) translateY(300%);
            transform: scale(0.04) translateY(300%);
	  top:-100%;

	}
}




		/* --- desktop --- */
@media screen and (min-width: 768px) and (max-width: 1280px) {
	
	    nav .menu {
            top:5%;
			left:10%;
        }

	    nav .menu li, nav .menu li a {
            width:208px;
            height:36px;
        }	
	
}


@media screen and (orientation:landscape)
and (min-device-width: 319px) 
and (max-device-width: 480px) {
	
	
	    nav .menu {
            top:5px;
        }
	
        nav .menu li, nav .menu li a {
            width:208px;
            height:36px;
        }
}




/* --------------- Navigation --------------- */



	
/* --- Animated Title --- */	
	.animated_title_container { 
		margin:auto;	
		width: 100%;
		max-width:720px;
		margin-top:30px;
		
	}	
	
	.animated_title_container img {
		position:absolute; 
		width:100%;	
		max-width:720px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
	}


.title {
    -webkit-animation: blink_nav1 0.2s alternate infinite; /* Safari 4+ */
    -moz-animation:    blink_nav1 0.2s alternate infinite; /* Fx 5+ */
    -o-animation:      blink_nav1 0.2s alternate infinite; /* Opera 12+ */
    animation:         blink_nav1 0.2s alternate infinite; /* IE 10+ */
}	
.title1 {
	opacity:0;
    -webkit-animation: blink_nav 0.2s alternate infinite; /* Safari 4+ */
    -moz-animation:    blink_nav 0.2s alternate infinite; /* Fx 5+ */
    -o-animation:      blink_nav 0.2s alternate infinite; /* Opera 12+ */
    animation:         blink_nav 0.2s alternate infinite; /* IE 10+ */
}
		
		
@-webkit-keyframes blink_nav {
  0%   { opacity: 0; }
  100% { opacity: 100; }
}
@-moz-keyframes blink_nav {
  0%   { opacity: 0; }
  100% { opacity: 100; }
}
@-o-keyframes blink_nav {
  0%   { opacity: 0; }
  100% { opacity: 100; }
}
@keyframes blink_nav {
  0%   { opacity: 0; }
  100% { opacity: 100; }
}

		
		
@-webkit-keyframes blink_nav1 {
  0%   { opacity: 100; }
  100% { opacity: 0; }
}
@-moz-keyframes blink_nav1 {
  0%   { opacity: 100; }
  100% { opacity: 0; }
}
@-o-keyframes blink_nav1 {
  0%   { opacity: 100; }
  100% { opacity: 0; }
}
@keyframes blink_nav1 {
  0%   { opacity: 100; }
  100% { opacity: 0; }
}		
	
	
	
	
@media only screen and (max-width: 768px){
	
	.content {
		top:80px;
	}
	
	.animated_title_container { 
		margin-top: 20px;			
	}
	
	.animated_title_container img { 
		max-width:460px;
		overflow:hidden;
	}
	
		.cross {
		    width:50px !important;
			height:50px !important;
			top:20px;
			right:20px;
	}

	
    h1 { font-size: 6em; }
	
	    nav .menu {
            top:5%;
			left:10%;
        }	
	
        nav .menu li, nav .menu li a {
            width:260px;
            height:45px;
        }	
		

}

/* --- Animated Title Ends --- */

/* --- Loader --- */
   .loader,
    .loader:after {
        border-radius: 50%;
        width: 20em;
        height: 20em;
    }
    .loader { 
		z-index:999;
        font-size: 10px;
        position: relative;
        text-indent: -9999em;
        border-top: 1.1em solid rgba(255, 255, 255, 0.2);
        border-right: 1.1em solid rgba(255, 255, 255, 0.2);
        border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
        border-left: 1.1em solid #ffffff;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
        top: 50%;
        left: 50%;
        margin: -60px 0 0 -60px;
		
    }

.loader img {
	z-index:998;
	width:50px;
	height:50px;
	overflow:hidden;
}



    @-webkit-keyframes load8 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes load8 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    #loadingDiv {
        position:absolute;
		z-index:997;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color: #ff6600;
    }
/* --- Loader Ebnds --- */