@charset "utf-8";
/* CSS Document */
* {margin:0px; padding:0px;}
@font-face{
	font-family:Angeline; src:url(../font/Angeline_Vintage_Demo.ttf);
	}
@font-face{
	font-family:In_collection; src:url(../font/InCollection.ttf);
	}
@font-face{
	font-family:Cloud; src:url(../font/Cloud-Light.otf);
	}	
header {height:110px; background:#f99766; border-top:30px solid #dad5cf; border-bottom:20px solid #f06e32; clear:both; overflow:auto; overflow-y:hidden; z-index:-1; }

#header-title h1{ font-family:In_collection; color:white; margin-top:25px; text-indent:17px}
#header-title h2{ font-family:Cloud; font-size:2em; color:#333}

#header-logo {width:180px; height:180px;  float:left; position:absolute; top:-7px;/* position:relative; */ z-index:0; /*margin-left:30px; float:left; margin-right:30px; width:180px;*/}
#header-title {position:relative; margin-left:200px; width:400px; background:none; }
#header-login {width:400px; float:right;  border-left:1px solid #FC0; background:none; position:relative; left:0; top:-100px; height:100px;}
#backhome { float:right; font-family:Cloud;  padding:10px 20px; background:#f66d27; border-radius:7px; color:white;/* top:-50px; position:relative;*/}


/*#header-login{width:30%; float:left;}*/

#logout {padding:6px 3px; background:white;  font-family:Cloud; border-radius:7px; position:relative; top:-10px;}
#logout:hover {background:red; transition:0.3s}


#main {height:550px; background:#a3a6ab; padding:30px; clear:both; position:relative;}
#brand-bar {overflow:auto; background:#ebecee; text-align:center; white-space:nowrap;  padding:10px 0px; overflow-x:hidden;}

footer{background:#d6d6d6;height:97px; min-width:730px;}
#footer-text {text-align:center;margin:auto; padding-top:15px; }
#text-contain {width:500px; margin:auto; font-family:Cloud; overflow:auto;}
body {background:none}

aside {width:29%;  height:100%;  float:left; margin-right:1%}
#slider-cover {width:70%; height:500px;  float:left;}

.container {width:1000px; margin:auto;}

.head-container {width:1000px; margin:auto;    clear:both;}

#login {width:240px; height:220px; 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3f4f6+0,d1d2d7+100 */
background: #f3f4f6; /* Old browsers */
background: -moz-linear-gradient(top,  #f3f4f6 0%, #d1d2d7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f3f4f6 0%,#d1d2d7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f3f4f6 0%,#d1d2d7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f4f6', endColorstr='#d1d2d7',GradientType=0 ); /* IE6-9 */

 margin:35px auto;
 border-radius:15px;
 }
 #login-head {height:40px; width:90px; margin:auto; background:#f16729; position:relative; text-align:center; font-family:Cloud; color:white; font-size:1.5em; padding-top:7px;}
 #triangle { 
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #f16729;
	position:absolute;
	bottom:-8px;
	left:44%;
	clear:both;
  }
#form-login {clear:both; width:150px; margin:auto; margin-top:20px; color:grey}
.login-text {clear:both;  font-family:Cloud;  margin-left:10px; font-size:0.8em}
.login-input {margin:auto; width:150px; height:22px;}
#remember {font-size:0.7em;}
#login-button {width:64px; height:25px; float:right; border-radius:7px; background:#f16729; color:white; border:none;}

 
#samplevdo {width:240px; height:140px;  border-radius:7px; margin:auto;}
#samplevdo h3 {height:23px; background:#5a5859;  border-radius:7px 7px 0px 0px; text-indent:25px; font-family:Cloud; color:white; font-weight:none;}

#silder {width:700px; height:470px; margin:10px auto;}
#slider-nav{width:100%; height:80px; background:red; clear:both}


/*Slider Modify*/
.owl-dot {
	width:24px;
	height:24px;
	border:1px solid #d3dadc;
	background:#e1eef4;
	margin:3px;
	float:left;
	text-align:center;
	padding-top:4px;
	font-family:Cloud;
	} 
.owl-dot.active{
	background:#b1b8b9;
	} 
	
.owl-nav {display:none;}

.owl-item {width:100%; height:100%}
.item {width:100%; height:100%;}
.owl-controls {height:30px; width:230px; margin:auto; margin-top:23px; z-index:30; position:relative;}
.owl-stage-outer {box-shadow:1px 2px 3px grey;}

/*page 2*/
#logo-list {/*background:#d6d6d6;*/ overflow:auto; padding:30px 30px; background:#FFF;}
#item {list-style:none; width:100%;}
#item.sizes li {width:125px; height:125px;  float:left; margin:5px;  margin-bottom:15px;}
#item.sizem li {width:180px; height:180px;  float:left; margin:5px; margin-bottom:15px;}
#item.sizes li div.img {width:80%; height:80%; border-radius:50%; margin:auto; border:3px solid white;}
#item.sizem li div.img {width:80%; height:80%; border-radius:50%; margin:auto; border:5px solid white;}
#item.sizes li p {background:white; width:100%; height:18%; margin-top:2%; text-align:center; font-family:Cloud; border-radius:25px; line-height:27px;}
#item.sizem li p {background:white; width:100%; height:18%; margin-top:2%; text-align:center; font-family:Cloud; border-radius:25px; font-size:1.6em}
#sample {background:url(../img/sampleitem.jpg); background-size:cover; background-position:center;}
.page2-container {max-width:1000px; margin:auto;}

/*page 3 */
#select {width:300px; overflow:auto; float:left; margin-top:25px;}
#select-logo { text-align:center;}
#select-logo img {width:55%;}
.select-text {text-align:center; font-family:In_collection; font-weight:800; font-size:1.3em; color:#d6d6d6; letter-spacing:1px; margin-top:20px;}
.select-container {width:120px; margin:auto;}
.select-img { width:120px; height:120px; border-radius:50%; border:3px solid white; margin:auto; background:url(../img/sampleitem.jpg); background-size:cover; background-position:center;}
.select-container p {background:white; width:100%; height:18%; margin-top:2%; text-align:center; font-family:Cloud; border-radius:25px; line-height:27px;}
.page3-container {max-width:1200px; overflow:auto;}


#backhome:hover {color:gold; transition:0.5s}


#design-list {background:#FFF; overflow:auto; padding:30px 30px; min-height:600px;}
#design {list-style:none;}
#design li {width:115px; height:200px; background:white; margin:5px; float:left}
#design li p {text-align:center; font-family:Cloud; margin-top:3px}
.design-photo {width:105px; height:170px; background:black; margin:auto; margin-top:4px; background:url(../img/sampleitem.jpg); background-size:cover; background-position:center}


.ortherpage {background:#a3a6ab; padding:10px 0px; padding-bottom:20px; }
.ortherpage .container { overflow:auto; margin:auto;}
.ortherpage #logo{width:70px;  height:100%; float:left;}
.ortherpage #footer-text {width:500px;  height:100%;  float:left;}
.ortherpage #description {background:white; width:480px; height:95px; overflow:hidden; border:5px solid #da7645; border-radius:20px; font-family:Cloud; overflow:hidden; font-size:0.9em;

}
.ortherpage #description:hover { /* overflow:auto;*/}

#back {float:right;}

#content { 
	padding:10px 25px; 
	-webkit-animation-name: move;
	-moz-animation-name: move;
	 animation-name: move;
	 
	 animation-duration: 30s;
	 -webkit-animation-duration: 30s;	 
	 -moz-animation-duration: 30s;	 	 
	   /*transition-duration: 30s;*/
/*	 animation-iteration-count: infinite;*/
    -webkit-animation-iteration-count: infinite;
/*    -webkit-animation-direction: right;*/
    -webkit-animation-timing-function:linear;
/*animation-direction: alternate;*/
	position:relative;
	
	}
#content:hover {
	   -webkit-animation-play-state: paused;
  	   -moz-animation-play-state: paused;
	 
	}	
@-webkit-keyframes move {
    0% { top:100px; }
    100% { top:-250px;}
}

@-moz-keyframes move {
	    0% { top:100px; }
    100% { top:-250px;}
	}