/* custimize menu */
.menu-container {
    width: 100%;
    margin: 0 auto;
    border-bottom:#818181 1px solid;
	z-index:50;
}
.menu-mobile {
    display: none;
    padding: 20px;
}
.menu-mobile:after {
    content: "\f394";
    font-family: "Ionicons";
    font-size: 2.5rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}
.menu-dropdown-icon:before {
    content: "\f489";
    font-family: "Ionicons";
    display: none;
    cursor: pointer;
    float: right;
    padding: 1.5em 2em;
    background: #fff;
    color: #333;
}
.menu > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
}
.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}
.menu > ul:after {
    clear: both;
}
.menu > ul > li {
    float: left;
    padding: 0;
    margin: 0;
}
.menu > ul > li a {
    text-decoration: none;
    padding: 5px 0px 8px 15px;
	padding-right:210px;
    display: block;
	color:#414146;
	font-size:21px;
	font-weight:bold;
}
.menu > ul > li a i {
	font-size:41px;
	position:relative;
	top:4px;
	margin-left:10px;
    transition-property: transform;
    transition-duration: .4s;
}
.menu > ul > li:hover {
    color:#000000 !important;
}
.menu > ul > li:hover i {
	position:relative;
}
.menu > ul > li a i.active {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
	position:relative;
	top:10px;
    animation-name: rotate; 
    animation-duration: .4s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: #FFFFFF;
	border:#818181 1px solid;
    padding: 20px;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}
.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}
.menu > ul > li > ul:after {
    clear: both;
}
.menu > ul > li > ul > li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    background: none;
    float: left;
}
.menu > ul > li > ul > li .technical {
	width:100%;
}
.menu > ul > li > ul > li.type, .menu > ul > li > ul > li.lenscolor {
	float:none;
	clear:both;
}
.menu > ul > li > ul > li.type a {
	font-size:16px;
	font-weight:bold;
	margin:7px 0px 0px 0px;
}
.menu > ul > li > ul > li.type ul {
	float:left;
	width:75%;
	margin:0px;
}
.menu > ul > li > ul > li.type > ul > li {
	width:25%;
	text-align:center;
}
.menu > ul > li > ul > li.type > ul > li h3 {
	text-align:center;
	font-size:16px;
	font-weight:bold;
	margin-top:10px;
	margin-bottom:0px;
	color:#414146;
}
.menu > ul > li > ul > li.lenscolor > ul > li {
	width:92px;
	position:relative;
}
.menu > ul > li > ul > li.lenscolor a {
	float:left;
	margin-right:20px;
	width:20%;
	padding:0px;
	font-size:16px;
	font-weight:bold;
}
.menu > ul > li > ul > li.technical .btn {
	height:35px;
	float:right;
	outline:0;
	color:#000000;
	border:1px solid #CCCCCC;
	background: #FFFFFF;
	/*
	background: -moz-linear-gradient(top, #121212 0%, #595959 50%, #595959 51%, #595959 100%);
	background: -webkit-linear-gradient(top, #121212 0%,#595959 50%,#595959 51%,#595959 100%);
	background: linear-gradient(to bottom, #121212 0%,#595959 50%,#595959 51%,#595959 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#121212', endColorstr='#595959',GradientType=0 );
	*/
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	margin-top:15px;
}
.menu > ul > li > ul > li.technical a {
	margin-right:0px;
	padding:0px;
	border-bottom:none;
	font-size:16px;
	font-weight:bold;
}
.menu > ul > li > ul > li a {
    color: #414146;
    padding: .2em 0;
    display: block;
}
.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    box-sizing: border-box;
}
.menu > ul > li > ul > li.technical > ul {
	margin:0px;
}
.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}
.menu > ul > li > ul > li > ul:after {
    clear: both;
}
.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    font-size: .8em;
}
.menu > ul > li > ul > li > ul > li {
	width:25%;
}
.menu > ul > li > ul > li.technical > ul > li {
	width:20%;
	padding:20px;
	border-right:#333333 1px solid;
	border-bottom:#333333 1px solid;
}
.menu > ul > li > ul > li.technical > ul > li:nth-child(5), .menu > ul > li > ul > li.technical > ul > li:nth-child(10) {
	margin-right:0px;
	padding-right:0px;
	border-right:none;
}
.menu > ul > li > ul > li.technical > ul > li:nth-child(6), .menu > ul > li > ul > li.technical > ul > li:nth-child(7), .menu > ul > li > ul > li.technical > ul > li:nth-child(8), .menu > ul > li > ul > li.technical > ul > li:nth-child(9), .menu > ul > li > ul > li.technical > ul > li:nth-child(10) {
	border-bottom:none;
}
.menu > ul > li > ul > li > ul > li a {
    border: 0;
}
.menu > ul > li > ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 10px 20px;
}
.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}
.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 1em 0;
}
.menu > ul > li > ul > li.technical > ul > li > ul {
	list-style:none;
	margin:20px 0px 0px 0px;
	padding:0px;
}
.menu > ul > li > ul > li.technical > ul > li > ul > li {
	font-size:14px;
	font-weight:bold;
	color:#777777;
}
.menu > ul > li > ul > li.technical > ul > li > ul > li input {
	margin-right:7px;
}
.menu > ul > li > ul > li.technical > ul > li > ul li a {
	font-size:16px;
	margin-bottom:10px;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: 959px) {
    .menu-container {
        width: 100%;
    }
    .menu-mobile {
        display: block;
    }
    .menu-dropdown-icon:before {
        display: block;
    }
    .menu > ul {
        display: none;
    }
    .menu > ul > li {
        width: 100%;
        float: none;
        display: block;
    }
    .menu > ul > li a {
        padding: 1.5em;
        width: 100%;
        display: block;
    }
    .menu > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul.normal-sub {
        width: 100%;
    }
    .menu > ul > li > ul > li {
        float: none;
        width: 100%;
        margin-top: 20px;
    }
    .menu > ul > li > ul > li:first-child {
        margin: 0;
    }
    .menu > ul > li > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul > li > ul > li {
        float: none;
    }
    .menu .show-on-mobile {
        display: block;
    }
}
.customize-menu-active {
	background-color:#CACACA;
}
#loading {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 100000000000;
    left: 0%;
    top: 0%;
    margin: 0;
	background:rgba(255,255,255,.7);
}
#loading:after {
	content: "";
	width:100%;
	height:100%;
	position:absolute;
	background: url(images/loader.gif) no-repeat left;
}
.customize_lens_color {
	width:80px;
	height:35px;
	display:block;
}
.customize_red {
	background-color:#C11D23;
}
.customize_blue {
	background-color:#2600FF;
}
.customize_orange {
	background-color:#FF8000;
}
.customize_green {
	background-color:#1C8600;
}
.customize_yellow {
	background-color:#FFEC00;
}
.customize_pink {
	background-color:#FF009C;
}
.customize_grey {
	background-color:#818181;
}
.customize_brown {
	background-color:#3D280C;
}
.customize_black {
	background-color:#000000;
}
.customize-check {
	width:24px;
	height:22px;
	background:url(../images/check.png) no-repeat;
	position:absolute;
	top:-0px;
	left:-7px;
}

/* marge image */
.component-bg {
	width:100%;
	height:453px;
	background: url(images/grid.png) repeat center center;
	padding:20px 0px;
}
.component {
	position: relative;
	padding: 0;
	margin: 0 auto;
	width:540px;
	height:405px;
	overflow:hidden;
}
.resize-container {
    position: relative;
    display: inline-block;
    cursor: move;
    margin: 0 auto;
}
.resize-container img {
    display: block
}
.resize-container:hover img,
.resize-container:active img {
    outline: 2px dashed rgba(222,60,80,.9);
}
.resize-handle-ne,
.resize-handle-se,
.resize-handle-nw,
.resize-handle-sw {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background: rgba(222,60,80,.9);
    z-index: 50;
}
.resize-handle-nw {
    top: -5px;
    left: -5px;
    cursor: nw-resize;
}
.resize-handle-sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}
.resize-handle-ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}
.resize-handle-se {
    bottom: -5px;
    right: -5px;
    cursor: se-resize;
}
.overlay {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 50;
	width: 536px;
	height: 401px;
    /*border: solid 2px rgba(222,60,80,.9);*/
	box-sizing: content-box;
	pointer-events: none;
}
.overlay:after,
.overlay:before {
	content: '';
	position: absolute;
	display: block;
	width: 204px;
	height: 40px;
    /*border-left: dashed 2px rgba(222,60,80,.9);
	border-right: dashed 2px rgba(222,60,80,.9);*/
}
.overlay:before {
	top: 0;
	margin-left: -2px;
	margin-top: -40px;
}
.overlay:after {
	bottom: 0;
	margin-left: -2px;
	margin-bottom: -40px;
}
.overlay-inner:after,
.overlay-inner:before {
	content: '';
	position: absolute;
	display: block;
	width: 40px;
	height: 204px;
    /*border-top: dashed 2px rgba(222,60,80,.9);
	border-bottom: dashed 2px rgba(222,60,80,.9);*/
}
.overlay-inner:before {
	left: 0;
	margin-left: -40px;
	margin-top: -2px;
}
.overlay-inner:after{
	right: 0;
	margin-right: -40px;
	margin-top: -2px;
}
button.btn-crop {
	position: absolute;
	vertical-align: bottom;
	right: 5px;
	bottom: 5px;
	padding: 6px 18px;
	z-index: 10;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	border-radius: 0px;
	color: #000000;
	outline:0;
}
.btn-crop img {
	vertical-align: middle;
	margin-left: 8px;
}
#resize-logo {
	position:absolute;
	z-index:50;
	top:0;
	left:0;
}

/* customize */
.customize {
}
.customize .customize-icon {
	float:right;
	margin-top:20px;
	margin-bottom:50px;
}
.customize .customize-icon a {
	margin-right:15px;
}
.customize .customize-icon a:last-child {
	margin-right:0px;
}
.customize .customize-logo {
	margin:0px 0px 20px 0px;
	padding:0px 0px 30px 0px;
	clear:both;
	border-bottom:#E0E0E0 2px solid;
}
.customize .customize-logo form {
	margin-bottom:15px;
}
.customize .customize-logo .alert {
	padding:7px 10px 5px 10px;
	font-size:12px;
	line-height:17px;
	margin-bottom:7px;
}
.customize .customize-logo h2 {
	color:#7C7C7C;
	font-size:20px;
	font-weight:bold;
	letter-spacing:0.3px;
	margin-bottom:10px;
}
.customize .customize-logo input[type=file]{
	height: 35px;
	padding: 6px 12px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	outline:0;
	background-color:#FFFFFF;
	border:#CCCCCC 1px solid;
}
.customize .customize-logo input[type=submit]{
	height: 35px;
	outline:0;
	background-color:#FFFFFF;
	border:1px solid #CCCCCC;
	color:#000000;
}
.customize .customize-share {
	padding:0px 0px 35px 0px;
	clear:both;
	border-bottom:#E0E0E0 2px solid;
}
.customize .customize-share h3 {
	color:#7C7C7C;
	font-size:14px;
	font-weight:bold;
	margin-bottom:10px;
}
.customize .customize-share .footer-social {
	display:table;
	margin:0 auto;
}
.customize .customize-share .footer-social li {
	margin-right:3px;
}
.customize-content h2 {
	text-align:left;
	font-size:30px;
	font-weight:bold;
	color:#7C7C7C;
	letter-spacing:0.3px;
}
.customize-filter {
	margin:20px 0px 0px 0px;
	padding:0px;
}
.customize-filter p {
	margin-bottom:5px;
}
.customize-divider hr {
	margin-top:100px;
}
#customize-main {
	margin-top:50px;
}
.customize-btn button {
	font-size:18px;
	font-weight:bold;
	letter-spacing:1px;
	color:#000000;
	background-color:#FFFFFF;
	padding:7px 10px 5px 10px;
	margin:25px auto 0px;
	display:table;
	border:1px solid #CCCCCC;
	outline:0;
}
.customize-btn button:disabled {
	background-color:#FFFFFF;
}
.customize_drag_area {
	margin:0px;
}
#customize-upload-logo img {
	cursor:move;
}
.customize-success {
	margin:80px 0px 0px 0px;
}
.customize-success h2 {
	margin-top:20px;
	font-weight:bold;
}

/* Tour */
.tour h2 {
	font-size:14px;
	font-weight:bold;
	margin:0px;
	background-color:#F7F7F7;
	border-bottom:1px solid #EBEBEB;
	letter-spacing:0px;
	line-height:normal;
	padding:8px 14px;
}
.tour p {
	margin:0px;
	padding:9px 14px;
	font-size:13px;
}
.tour .tour-step-one {
	width:300px;
	border:2px solid rgba(0,0,0,.2);
	background-color:#FFFFFF;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	position:absolute;
	z-index:1;
	top:70px;
	left:-75px;
	padding:0px;
	box-shadow:0 5px 10px rgba(0,0,0,.2);
	-webkit-box-shadow:0 1px 10px rgba(0,0,0,.2);
    transition:opacity .15s linear;
	-o-transition:opacity .15s linear;
	-webkit-transition:opacity .15s linear;
}
.tour .tour-step-one:after, .tour .tour-step-one:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	z-index:1;
	pointer-events: none;
}

.tour .tour-step-one:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #F7F7F7;
	border-width: 11px;
	margin-left: -11px;
}
.tour .tour-step-one:before {
	border-color: rgba(224, 224, 224, 0);
	border-bottom-color: #e0e0e0;
	border-width: 17px;
	margin-left: -17px;
}