/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

	body {
	    font-family: Helvetica,Arial, sans-serif;
            text-align: center;
            height: 100%;
            width: 100%;
            margin:0;
            padding:0;
            color: #272727;
            background: #000;
	}
        
        body.portfolio {background: #000 url(/images/menu_bg.png) repeat;}
		body.portfolio  #content {background: none;opacity: 1;width:auto;color:#fff;height:auto;margin-left:200px; margin-right: 100px;padding: 2% 0;}
        body.packages  #content, body.testimonials  #content {width:80%;background: none;color: #fff;opacity: 1; padding:0;}
        body.contact #ui-datepicker-div{text-align:center;font-size:12px;}
		body.contact  #content {width:70%;max-width:800px;margin-left:auto;margin-right:auto;}
		
        h1 {text-align: center;padding-right: 1em;margin-top: 10px;}
        .floatright {float: right;}
        .floatleft {float: left;}
        .col50 {width: 49%;min-width:320px;}
        .packages .col50 {padding: 0 5%; width: 40%;}
        .right {text-align:right;}
        .center {text-align:center;}
        a {color: #272727;outline:none;}
        a:hover{text-decoration: none; }
		img {outline:none;border:0;}
        sup {color:#BE0529;}
        .clear {clear:both;}
        
        p, ul {line-height: 1.5em;}
        hr {margin: 30px 0;}
        
        #content
		{
            width: 70%;
            margin-top: 5%;
            margin-bottom: 10%;
            margin-left: 12.5%;
            background: #fff;
            color: #000;
            opacity:0.8;
            filter:alpha(opacity=80); /* For IE8 and earlier */
            display: block;
            padding: 2% 5%;
            text-align: left;
            overflow: hidden;
			 -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;
        }
        form {
            margin: 0 0 20px;
            padding-bottom: 20px;
            overflow: hidden;
        }
        
        .client form {margin: 0px auto; width: 60%; min-width: 300px;}
        
        fieldset {
            margin: 0;
            padding: 0;
			border:0;
			clear:both;
        }
        select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
            border-radius: 4px 4px 4px 4px;
            color: #555555;
            display: inline-block;
            font-size: 14px;
            height: 22px;
            line-height: 20px;
            padding: 4px 6px;
            vertical-align: middle;
            width: 300px;
			float:left;
        }
		select {height:32px;}
        textarea {
            height: auto;
            min-height: 100px;
        }
        select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
            background-color: #FFFFFF;
            border: 1px solid #CCCCCC;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
            transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
        }
        select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus {
            border-color: rgba(82, 168, 236, 0.8);
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
            outline: 0 none;
        }
        input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
            background-color: #EEEEEE;
            cursor: not-allowed;
        }
        input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] {
            background-color: rgba(0, 0, 0, 0);
        }
        input:focus:invalid, textarea:focus:invalid, select:focus:invalid {
            border-color: #EE5F5B;
            color: #B94A48;
        }
        input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus {
            border-color: #E9322D;
            box-shadow: 0 0 6px #F8B9B7;
        }      
	
        input[type="submit"], input[type="reset"], div.button {
            background: #e60569;
            border: 1px solid #cc045e;
            border-radius: 3px 3px 3px 3px;
            color: #FFFFFF;
            cursor: pointer;
            font-size: 1em;
            line-height: 1.2em;
            padding: 5px 0;
            width: 100px;
			float:left;
        }
        
        label {width: 200px;display:inline-block;margin-top:10px;float:left;}
        
        /* General styles for all menus */
        .cbp-spmenu {
            background: #000 url(/images/menu_bg.png) repeat;
            color: #fff;
            text-align: left;
            z-index: 2000;
            position:fixed;
        }
        
        #fwp-watermark {
            position: fixed;
            bottom: 20px;
            right: 20px;
            font-size: 0.7em;
            color: #fff;
            text-align: right;
        }
        
        #cbp-spmenu-nav {display:block; float: left;width: 200px;height: 100%;position: relative;}
        #cbp-spmenu-nav > a {margin-top: 30px; margin-bottom:30px;}
        #cbp-spmenu-hornav{width: 180px; position: relative;padding-bottom: 20px;margin:0 auto;text-align:left;}
        #fwp-copyright {font-size: 0.7em;position:absolute; bottom: 0px; left:0px;width: 200px; text-align: center;color: #999;}
        #logo-fwp{margin: 20px 0 0 10px;}
        #logout {float: right; margin: 10px 20px 0 0;}
        #navbar {cursor: pointer;background: #000; float: left; display:block;height:100%; color: #fff; text-align:center;width:59px;border-left: 1px solid #333;position:relative;}
        #topnavbar {cursor: pointer;background: #000; display:block;height:59px; color: #fff; text-align:center;width:100%;border-top: 1px solid #333;position:relative;}
        #topnavbar #fwp {position: absolute; left: 15px; top: 15px;}
        #fwp{position: absolute; top: 45%; left:15px;}
        
        .home a.menu_home, .portfolio a.menu_portfolio, .packages a.menu_packages, .about a.menu_about, .contact a.menu_contact, .client a.menu_clients {font-size:1.1em; color: #fff;}
        
		.cbp-spmenu
		{
			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
			filter: alpha(opacity=85); 
			/* Modern Browsers */
			opacity: 0.85;
		}
		
        .cbp-spmenu a {
            display: block;
            color: #ccc;
            font-size: 1em;
            font-weight: 300;
            text-decoration: none;
            margin-left: 40px;
            line-height: 0.7em;
        }
		
		.cbp-spmenu-horizontal a {line-height: 1.6em;}
		
		.cbp-spmenu a.menu_logo {margin-left:0;}
        
         
		.cbp-spmenu a:hover {
            color: #fff;
        }
         
        .cbp-spmenu a:active {
        }
         
        /* Orientation-dependent styles for the content of the menu */
         
        .cbp-spmenu-vertical {
            width: 260px;
            height: 100%;
            top: 0;
            z-index: 1000;
        }
        
        .cbp-spmenu-horizontal {
            width: 100%;
            top: 0;
            left: 0;
            z-index: 2000;
            display: none;
			text-align:center;
        }
        
        .clientspace .cbp-spmenu-horizontal {
            display:block;
        }
                 
         
        /* Vertical menu that slides from the left or right */
         
        .cbp-spmenu-left {
            left: -200px;
        }
        
        .cbp-spmenu-left.cbp-spmenu-open {
            left: 0px;
        }
        
        .cbp-spmenu-top {
            top: -255px;
        }
        
        .cbp-spmenu-top.cbp-spmenu-open {
            top: 0px;
        }
        
        .cbp-spmenu-top.cbp-spmenu-open {
            /*position: static;*/
        }
		
		/* Push classes applied to the body */

		.cbp-spmenu-push {
			overflow-x: hidden;
			position: relative;
			left: 0;
		}

		.cbp-spmenu-push-toright {
			left: 260px;
		}

		.cbp-spmenu-push-toleft {
			left: -260px;
		}

		/* Transitions */

		.cbp-spmenu,
		.cbp-spmenu-push {
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			transition: all 0.3s ease;
		}
        
         
        /* Transitions */
         
        .cbp-spmenu,
        .cbp-spmenu-push {
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }
        

        
        /*Styles for portfolio gallery*/
        #slidesNav {width: 12000px;z-index: 1500; display:block; overflow:hidden;height: 150px; max-height: 150px;position: fixed; bottom: 0; left: 0; background: #000;}
        .slideThumb {margin-right:10px;/*height:120px;float: left;margin: 15px 0 0 10px;*/} 
        .gal:hover img {opacity:0.9;} /*make it looks like it's displaying a white transparency overlay on mouse over*/
		.gal {width: 250px; height: 250px;margin-bottom:20px;}
		
		 /*Styles for packages*/
        .package {padding: 20px;background: #fff; width:360px; height:260px; margin-bottom:20px; color: #000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";filter: alpha(opacity=85); /* Modern Browsers */opacity: 0.85; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
		.package h3 {margin:0;margin-bottom:1em;}
		.package.inquiries {background:#bbb;}
		
		/*Styles for testimonial*/
        .thoughts {padding: 20px;background: #fff; width:360px; height:auto; margin-bottom:20px; color: #000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";filter: alpha(opacity=85); /* Modern Browsers */opacity: 0.85; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
		.thoughts p {margin-top:0;}
		
/* Example media queries */

@media only screen and (min-width: 320px) and (max-width: 500px) and (orientation:portrait){
 
    .cbp-spmenu-vertical{
        display:none;
    }
    
    .cbp-spmenu-horizontal{
        display:inline;
    }
    
    .clientspace .cbp-spmenu-horizontal {
        display:inline;
    }
    
    .cbp-spmenu a {font-size: 1em; line-height: 2em;}
    .cbp-spmenu-top {top: -313px;}
    .floatright {float:none;}
    .floatleft {float: none;}
    .col50, .contact .col50.floatleft {width: 100%;min-width:0;}
	
    #content
        {
        width:80%;
        margin-top: 70px;
        margin-bottom: 100px;
        margin-left: 5%;
    }
	body.portfolio {text-align:center;}
	body.portfolio  #content {margin-left: auto;margin-right:auto;width:250px;}
    #fwp-watermark {font-size: 0.5em;}
    #fwp-watermark img{width: 90px; height: 31px;}
    
    #slidesNav {height: 150px;}
     
    select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
        width: 95%;
    }
	
	.package, .thoughts {width:85%;margin-left:0;height:auto;}
	.package ul{padding-left:15px; font-size:0.8em;width:100%;}
	.package h3 {width:100%;}
	.package small {padding-left:0;width:100%;}
	body.packages #content {width:90%;}
}

@media only screen and (max-height: 480px) and (orientation:landscape){
    #cbp-spmenu-nav {min-height: 350px;}
    #cbp-spmenu-nav > a {margin-top: 0px; margin-bottom:0px;}
	.contact .col50.floatleft {min-width:300px;}
    .cbp-spmenu a {font-size: 1em; line-height: 1.6em;font-weight: 200;}
	.cbp-spmenu-top {top: -255px;}
	body.portfolio {text-align:center;}
	body.portfolio  #content {margin-left: auto;margin-right:auto;width:250px;}
}