﻿
/* -------------------------------------------------------------------------------

    0.  Reset & Clearfix
    1.  Document Setup
    2.  Typography
    3.  links
    4.  Forms
    5.  Wrapping
    6.  Columns
    7.  Social Column
    8.  Header
    9.  Navigation
    10. Content
    11. Resume
    12. Dividers
    13. Buttons
    14. Footer
    15. Color Fills
    16. Google map
    17. Alert Boxes
    18. Project Feed Filter
    19. Project Feed
    20. Project Item Overlay
    21. Portfolio Details
    22. Isotope Plugin
    23. Back to Top
    24. Media Queries

*/



/* 0. Reset and Clearfix */

	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,and,address,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,ul,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,input,textarea,select{margin:0;padding:0;outline:0;border:0;background:transparent;vertical-align:baseline;font-size:100%;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{Â§ght:1;}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}del{text-decoration:line-through;}hr{clear:both;margin:0;padding:0;height:1px;border:0;background:transparent;color:transparent;}mark{background-color:#ffffb3;font-style:italic;}input,select{vertical-align:middle;}ins{background-color:red;color:white;text-decoration:none;}ol,ul{list-style:none;}table{border-spacing:0;border-collapse:collapse;}

	.clear{display:block;visibility:hidden;clear:both;overflow:hidden;width:0;height:0;}.clearfix:after{display:block;visibility:hidden;clear:both;width:0;height:0;content:' ';font-size:0;line-height:0;line-line-line-line-line-line-;}* html .clearfix,:first-child+html .clearfix{zoom:1;}


/* 1. Document Setup */

	html {
        overflow-x: hidden;
        width: 100%;
        height: 100%;
    }
	body{
		background: url(../images/bg_main.png) repeat center center fixed;	
		overflow-x: hidden;
        overflow-y: auto;
        color: #333;
        font: 14px/1.7 "Open Sans", sans-serif;
        -webkit-font-smoothing: antialiased;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility:    hidden;
		-ms-backface-visibility:     hidden;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	ol, ul {
		list-style: none; }
		
	ul.a {list-style-type: circle;}
	ul.square {list-style-type: square;}
	ol.upper-roman {list-style-type: upper-roman;}
	ol.lower-alpha {list-style-type: lower-alpha;}	
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }

	code {
		padding: 3px 6px;
		font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
		background: #fcfcfc;
		border: 1px solid #e4e4e4;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		color: #3f8faf;
	}


/* 2. Typography */

	h1, h2, h3, h4, h5, h6 {
		color: #333;
		font-weight: 400;
	}
		
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 38px; line-height: 60px; }
	h2 { font-size: 32px; line-height: 40px; }
	h3 { font-size: 28px; line-height: 32px; font-weight: 300; }
	h4 { font-size: 14px; line-height: 21px; }
	h5 { font-size: 12px; line-height: 24px; }
	h6 { font-size: 10px; line-height: 21px; }

	h1.headline, h2.headline, h3.headline {
        margin-bottom: 25px;
    }
    h4.headline, h5.headline, h6.headline {
        margin-bottom: 15px;
    }

	p { margin: 0 0 15px 0; line-height: 20px;}
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }

	em { font-style: italic; }
	strong { font-weight: bold; }
	small { font-size: 80%; }

	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }


/* 3. Links */
	a, a:visited {color: #333; text-decoration: none; outline: 0; -webkit-transition: color 0.1s ease-in-out; -moz-transition: color 0.1s ease-in-out; -o-transition: color 0.1s ease-in-out; -transition: color 0.1s ease-in-out;}
	a:hover, a:focus { color: #ff5533; }
	p a, p a:visited { line-height: inherit; }

/* 4. Forms */

	input[type="text"], input[type="password"], input[type="email"], textarea, select {
		border: 1px solid #d8d8d8;
		padding: 9px;
		outline: none;
		font: 12px;
		color: #888;
		margin: 0;
		max-width: 100%;
		display: block;
		background: #fff;
		-webkit-box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1);
		box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1);
	}
	input[type=text],textarea {
	    border-radius:0;
	    color:#959595;
	    display:block;
	    font:11px/1.7 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	    margin-bottom:10px;
	    padding:5px 9px;
	    width:100%;
	    box-sizing: border-box;
	}
	textarea {
	    resize:none;
	    width:100%;
	}
	input[type="submit"], input[type="reset"], input[type="button"], button, .button {
	    display: inline-block;
	    padding: 5px 20px 5px;
	    margin-left: 1px;
	    border-radius: 3px;
	    border: none;
	    color: #fff;
	    opasity:0,5;
	    font-weight: 600;
	    font-size: 12px;
	    font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	    line-height: 1.5;
	    cursor: pointer;
	    -webkit-font-smoothing: antialiased;

	    -webkit-transition: background .2s ease-out;
	    -moz-transition: background .2s ease-out;
	    -o-transition: background .2s ease-out;
	    -ms-transition: background .2s ease-out;
	    transition: background .2s ease-out;
	}
	input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, button:hover, .button:hover {
	    color: #fff;
	}
	#contact-form {
	    margin-bottom:20px;
	}


/* 5. Wrapping */
	.vcard-container {
		margin: 64px auto 0;
		width: 896px;
	}

/* 6. Columns */
    .one-half       { width: 49%; }
    .one-third      { width: 31.9%; }
    .two-third      { width: 64%; }
    .one-fourth     { width: 23.5%; }
    .three-fourth   { width: 74.5%; }
    .one-fifth      { width: 18.4%; }
    .two-fifth      { width: 38.8%; }
    .three-fifth    { width: 59.2%; }
    .four-fifth     { width: 79.6%; }
	.full-one     { width: 100%; }
    .one-half,
    .one-third,
    .two-third,
    .three-fourth,
    .one-fourth,
    .one-fifth,
    .two-fifth,
    .three-fifth,
    .four-fifth {
        position: relative;
        float: left;
        margin-right: 2%;
    }

    .column-last {
        clear: right;
        margin-right: 0!important;
    }

    hr {
        display: block;
    }

    .sep10   { height: 10px; }
    .sep20   { height: 20px; }
    .sep30   { height: 30px; }
    .sep40   { height: 40px; }
    .sep50   { height: 50px; }
    .sep60   { height: 60px; }
    .sep70   { height: 70px; }
    .sep80   { height: 80px; }
    .sep90   { height: 90px; }
    .sep100  { height: 100px; }


/* 7. Social column */
	.social-buttons {
		float: left;
	}
	.social-buttons i {
		font-size: 21px;
		color: #34495E;
	}
	.social-buttons div {
		height: 64px;
		width: 64px;
		text-align: center;
		line-height: 68px;
		vertical-align: middle;
	}

	.facebook {
		background-color: #d2d2d2;
		background-color: rgba(255, 255, 255, 0.4);
	}
	.facebook:hover {
		background-color: #3498db;
		-webkit-transition: color ease .2s, background ease .2s;
		-moz-transition: color ease .2s, background ease .2s;
		-ms-transition: color ease .2s, background ease .2s;
		-o-transition: color ease .2s, background ease .2s;
		transition: color ease .2s, background ease .2s;	
	}

	.savanceenterprise {
		background-color: #d2d2d2;
		background-color: rgba(255, 255, 255, 0.4);
	}
	.savanceenterprise:hover {
		background-color: #3498db;
		-webkit-transition: color ease .2s, background ease .2s;
		-moz-transition: color ease .2s, background ease .2s;
		-ms-transition: color ease .2s, background ease .2s;
		-o-transition: color ease .2s, background ease .2s;
		transition: color ease .2s, background ease .2s;	
	}
	
	.twitter {
		background-color: #dcdcdc;
		background-color: rgba(255, 255, 255, 0.5);
	}
	.twitter:hover {
		background-color: #069eff;
		-webkit-transition: color ease .2s, background ease .2s;
		-moz-transition: color ease .2s, background ease .2s;
		-ms-transition: color ease .2s, background ease .2s;
		-o-transition: color ease .2s, background ease .2s;
		transition: color ease .2s, background ease .2s;		
	}

	.linkedin {
		background-color: #e6e6e6;
		background-color: rgba(255, 255, 255, 0.6);
	}
	.linkedin:hover {
		background-color: #06a1c3;
		-webkit-transition: color ease .2s, background ease .2s;
		-moz-transition: color ease .2s, background ease .2s;
		-ms-transition: color ease .2s, background ease .2s;
		-o-transition: color ease .2s, background ease .2s;
		transition: color ease .2s, background ease .2s;		
	}

	.skype {
		background-color: #f0f0f0;
		background-color: rgba(255, 255, 255, 0.7);
	}
	.skype:hover {
		background-color: #30a6df;
		-webkit-transition: color ease .2s, background ease .2s;
		-moz-transition: color ease .2s, background ease .2s;
		-ms-transition: color ease .2s, background ease .2s;
		-o-transition: color ease .2s, background ease .2s;
		transition: color ease .2s, background ease .2s;		
	}

	.instagram {
		background-color: #f8f8f8;
		background-color: rgba(255, 255, 255, 0.8);
	}
	.instagram:hover {
		background-color: #da442e;
		-webkit-transition: color ease .2s, background ease .2s;
		-moz-transition: color ease .2s, background ease .2s;
		-ms-transition: color ease .2s, background ease .2s;
		-o-transition: color ease .2s, background ease .2s;
		transition: color ease .2s, background ease .2s;	
	}
	.main-column {
		overflow: hidden;
	}

/* 8. Header */
	.top-row {
		max-height: 192px;
		overflow: hidden;
		zoom: 1;
	}
	.photo {
		float: left;
	}
	.attributes {
		background-color: #2f74a3;
		max-width: 100%;
		overflow: hidden;
		zoom: 1;
	}
	.name {
		background-color: #2f74a3;
		float: left;
		width: 60%;
		height: 96px;
		line-height: 96px;
		color: #fff;
		text-align: center;
		font-size: 1.8em;
		font-weight: 600;
	}
	.position {
		background-color: #266997;
		float: right;
		width: 40%;
		height: 96px;
		line-height: 96px;
		color: #fff;	
		text-align: center;	
	}

	#mobile_row {
		display: none;
		width: 100%;
	}

/* 9. Navigation */
	.tabs {
		padding: 0;
	}
	.tabs i {
		font-size: 28px;
	}
	.tabs li {	
		height: 96px;
		line-height: 107px;
		text-align: center;
		width: 25%;
		float: left;
		list-style: none;
	}
	.tabs li a {
		display: block;
		position: relative;
		-webkit-transition: color ease .4s, background ease .4s;
		-moz-transition: color ease .4s, background ease .4s;
		-ms-transition: color ease .4s, background ease .4s;
		-o-transition: color ease .4s, background ease .4s;
		transition: color ease .4s, background ease .4s;
		color: #fff;
		text-decoration: none;	
	}

	.tabs li.about a {
		background: #1abc9c;
	}
	.tabs li.about.active a,
	.tabs li.about a:hover {
		color: #1abc9c;
	}

	.tabs li.resume a {
		background: #3498db;
	}
	.tabs li.resume.active a,
	.tabs li.resume a:hover {
		color: #3498db;
	}

	.tabs li.portfolio a {
		background: #9b59b6;
	}
	.tabs li.portfolio.active a,
	.tabs li.portfolio a:hover {
		color: #9b59b6;
	}

	.tabs li.contacts a {
		background: #e67e22;
	}
	.tabs li.contacts.active a,
	.tabs li.contacts a:hover {
		color: #e67e22;
	}

	.tabs li.feedback a {
		background: #e74c3c;
	}
	.tabs li.feedback.active a,
	.tabs li.feedback a:hover {
		color: #e74c3c;
	}

	.tabs li a:hover,
	.tabs li.active a {
		background: #fff !important;
	}


/* 10. Content*/
	.content {
		min-height: 200px;
		max-width: 100%;
		background: #fff;
		padding-bottom: 50px;
		overflow: hidden;
	}
	.plain-content {
		padding: 40px 64px 40px 64px;
	}
	.wopadd {
		padding: 0 64px 0 64px;
	}
	.grey-content {
		padding: 40px 64px 40px 64px;
		background: #eeeeee;
		display: inline-block;
	}

	div #home  {
		padding: 90px 128px 40px 192px;
	}
	#home p {
		font-size: 54px;
		font-weight: 300;
		line-height: 32px;
	}
	#home span {
		color: #9b59b6;
		font-size: 32px;
		margin: 12px 0 0 4px;
	}

	.services span {
	    background: #e1e1e1;
	    padding: 4px 10px 5px 10px;
	    width: 100%;
	}
	.services span:hover {
		background: #e74c3c;
	}
	.services a span {
		font-size: 11px;
	}
	.services a:hover span {
		color:#fff;
	}
	.servtitle {
	    margin-bottom:12px;
	}
	.servtitle h3 {
	    display: inline;
	    font-size: 18px;
	    color: #333;
	    line-height: 12px;
	}
	.servicon {
	    color: #666;
	    font-size: 16px;
	    font-weight: bold;
	}
	.servicon i {
	    color: #fff;
	    font-size: 21px;
	    -webkit-border-radius: 1px;
	           -moz-border-radius: 1px;
	                border-radius: 1px;
	    display:inline-block;
	    background: #e74c3c;
	    width:48px;
	    height:48px;
	    line-height: 48px;
	    text-align: center;
	    margin-right: 10px;
	}
	.web {
		background-color: #f39c12 !important;
	}
	.ui {
		background-color: #16a085 !important;
	}
	.app {
		background-color: #9b59b6 !important;
	}


/* 11. Resume */
	.job {
		padding-top: 30px;
	}
	.date {
		display: inline;
		float: left;
		width: 64px;
		text-align: right;
		margin-right: 20px;
	}
	.jobtitle {
		display: inline;
		float: left;
		width: 80%;
		padding: 0 0 0 0;
		zoom: 1;
	}
	.datefrom {
		background: #34495e;
		padding: 6px 2px 6px 2px;
		color: #fff;
		font-size: 10px;
		text-align: center;
	}
	.datetill {
		background: #3498db;
		padding: 6px 2px 6px 2px;
		color: #fff;
		font-size: 10px;
		text-align: center;
	}
	.datetill-f {
		background: #9b59b6;
		padding: 6px 2px 6px 2px;
		color: #fff;
		font-size: 10px;
		text-align: center;
	}
	.jobdescription {
		padding-top: 24px;
	}
	.trianglewrap {
		width: 64px;	
	}
	.datetriangle {
		float: right;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 0 10px 10px 0;
		border-color: transparent #3498db transparent transparent;
	}
	.datetriangle-f {
		float: right;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 0 10px 10px 0;
		border-color: transparent #9b59b6 transparent transparent;
	}


/* 12. Dividers */
	.dividewhite2 {
	    height: 20px;
	}
	.dividewhite3 {
	    height: 30px;
	}
	.dividewhite4 {
	    height: 40px;
	}
	.dividewhite6 {
	    height: 60px;
	}
	.dividewhite8 {
	    height: 80px;
	}


/* 13. Buttons */
	.button-red {
	    background: #e74c3c !important;
	}
	.button-red:hover {
	    background: #ff7357 !important;   
	}
	.button-blue {
	    background: #3498db !important;
	}
	.button-blue:hover {
	    background: #56aee9 !important;   
	}
	.button.small {
	    padding: 5px 8px 6px;
	    font-size: 11px;
	    line-height: 11px;
	}
	.big {
	    padding: 10px 30px 10px !important;
	}


/* 14. Footer */
	#footer {
		max-width: 100%;
		background-color: #d2d2d2;
		background-color: rgba(255, 255, 255, 0.3);
		height: 64px;
	}
	.triangle {
		display: inline;
		float: left;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 64px 64px 0 0;
		border-color: #ffffff transparent transparent transparent;
	}
	.copyright {
		display: inline;
		float: left;
		line-height: 64px;
		font-size: 11px;
		text-transform: uppercase;
		color: #fff;
	}


/* 15. Color Fills */
	.blue {
		color: #3498db !important;
	}
	.orange {
		color: #e74c3c !important;
	}
	.orangestrike{
		color: #e74c3c !important;
		text-decoration: line-through;
	}

/*  16. Google Map */
	#map {
	    width: 100%;
		height: 250px;
	}
	#map img {
	max-width: none;
	}


	/*  Contact Form */
	.feedbacks {
		padding-top: 24px;
	}


/*  17. Alert Boxes */
	.alert,
	label.error {
	    -webkit-border-radius: 3px;
	       -moz-border-radius: 3px;
	            border-radius: 3px;
	    color: #fff;
	    display: block;
	    margin-bottom: 10px;
	    padding: 6px 10px 6px 10px;
	    width: 100%;
	    box-sizing: border-box;
	}
	.alert.success {
	    background: #93b336;
	}
	.alert.notice {
	    background: #507cc3;
	}
	.alert.warning {
	    background: #ffbb00;
	}
	.alert.error,
	label.error {
	    background: #e74c3c;
	}
	.alert.neutral {
	    background: #959595;
	}


/*  18. Project Feed Filter */
	.project-feed-filter {
	    display: inline-block;
	    margin: 30px 0 30px 0;
	    font-size: 12px;
	}
	.project-feed-filter li {
	    display: block;
	    float: left;
	    margin: 0;
	    padding: 5px 0;
	    list-style: none;
	}
	.project-feed-filter a {
	    display: block;
	    margin: 0 20px 0 0;
	    color: #959595;
	}
	.project-feed-filter a:hover, .project-feed-filter .current {
	    color: #e74c3c;
	}


/*  19. Project Feed */
	.project-feed {
		width: 100%;
	}
	.project-feed > div {
	    position: relative;
	    float: left;
	    margin: 0;
	    list-style: none;
	}

	.project-feed div img {
	    display: block;
	    width: 100%;
	}
	.project-feed .one-third {
		width: 33.3%;
		margin-right: 0px;
	}


/*  20. Project Item Overlay */
	.project-item {
	    overflow: hidden;
	}
	.project-item .thumbnail {
	    overflow: hidden;
	    position: relative;
	}
	.project-item .overlay, .overlay {
	    position: absolute;
	    top: 0;
	    left: 0;
	    overflow: hidden;
	    width: 100%;
	    height: 100%;
	}
	.project-item .mask {
	    position: absolute;
	    top: 0;
	    left: 0;
	    overflow: hidden;
	    width: 100%;
	    height: 100%;
	    background: #e74c3c;
	    -webkit-backface-visibility: hidden;
	    
	    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	    filter: alpha(opacity=0);
	    opacity: 0;

	    -webkit-transition: all 0.3s ease;
	    -moz-transition: all 0.3s ease;
	    -o-transition: all 0.3s ease;
	    -ms-transition: all 0.3s ease;
	    transition: all 0.3s ease;
	}
	.project-item:hover .mask {
	    opacity: 1;
	}
	.project-item .icon-image {
	    position: absolute;
	    left: 50%;
	    margin-top: 40%;
	    margin-left: -18px;
	    width: 42px;
	    height: 42px;
	    background: url(../images/icon_image.png) center no-repeat;
	    z-index: 100;
	}
	.project-item .thumbnail .icon-image {
	    margin-top: 45%;
	}
	.project-item .icon-image:hover {
	    background-color: #ed5f50;

	}
	.project-item .item-title {
	    position: absolute;
	    bottom: 40px;
	    color: #fff;
	    font-weight: 500;
	    width: 100%;
	    text-align: center;
	}
	.project-item .item-title:hover {
	    color: #ffc2b6;
	}
	.project-item .thumb-item-title {
	    position: relative;
	    background: #f5f5f5;
	    padding: 15px 20px;
	    text-align: center;
	}
	.project-item .thumb-item-title span {
	    color: #959595;
	    font-size: 12px;
	}

	#recent h2 {
	    padding-bottom: 16px;
	    color: #e74c3c;
	}

/*  21. Portfolio Details */
	.single-project-wrapper {
	    margin-top: 15px;
	}
	.project-title {
	    float: left;
	    margin-bottom: 30px;
	    line-height: 1.3;
	}
	.project-nav {
	    margin: 20px 0 35px 0;
	}
	.project-nav a {  
	    margin-right: 8px;
	    width: 25px;
	    height: 25px;
	    background-color: #e1e1e1;
	    color: #fff;
	    text-align: center;
	    font-weight: 600;
	    font-size: 12px;
	    line-height: 25px;
	    display: inline-block;
	}
	.project-nav a:hover {
	    background-color: #e74c3c;
	}
	.project-nav .prev, .project-nav .next, .project-nav .back {
	    text-indent: -9999px;
	    background-image: url(../images/pagination_control_prev.png);
	    background-repeat: no-repeat;
	    background-position: 50% 50%;
	}
	.project-nav .next  {
	    background-image: url(../images/pagination_control_next.png);
	}
	.project-nav .back  {
	    background-image: url(../images/pagination_control_back.png);
	}

	.project-description .overview {
	    margin-top: 30px;
	}
	.project-description .description {
	    margin-bottom: 20px;
	}


/*  22. Isotope Plugin */
	#infscr-loading {
	    position: absolute;
	    bottom: 0;
	    z-index: 100;
	    width: 100%;
	    text-align: center;
	}
	#infscr-loading img {
	    display: none;
	}
	#infscr-loading div {
	    display: inline-block;
	    padding: 15px 20px;
	    -webkit-border-radius: 5px;
	       -moz-border-radius: 5px;
	            border-radius: 5px;
	    background: #fec901;
	    color: #fff;
	    font-weight: 800;
	    font-size: 14px;
	}
	.isotope-item {
	    z-index: 2;
	}
	.isotope-hidden.isotope-item {
	    z-index: 1;
	    pointer-events: none;
	}
	.isotope, .isotope .isotope-item {/* change duration value to whatever you like */
	    -webkit-transition-duration: 0.8s;
	       -moz-transition-duration: 0.8s;
	            transition-duration: 0.8s;
	}
	.isotope {
	    -webkit-transition-property: height, width;
	       -moz-transition-property: height, width;
	            transition-property: height, width;
	}
	.isotope .isotope-item {
	    -webkit-transition-property: -webkit-transform, opacity;
	       -moz-transition-property:    -moz-transform, opacity;
	        -ms-transition-property:     -ms-transform, opacity;
	         -o-transition-property:         top, left, opacity;
	            transition-property:         transform, opacity;
	}


/*  23. Back to Top */

	#back-top a {
	    background: #ccc url(../images/back_top.png) no-repeat 50% 50%;
	    bottom: 60px;
		opacity:0.5;
		filter:alpha(opacity=40);
	    display: block;
	    height: 40px;
	    position: fixed;
	    right: 30px;
	    width: 40px;
	}
	#back-top a:hover {
	    background: #d73300 url(../images/back_top.png) no-repeat 50% 50%;
	}


/*  24. Media Queries */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {

		.vcard-container {
			width: 716px;
		}
		.one-third { 
			width: 100% !important;
			margin-right: 0!important;
			margin-bottom: 32px !important;
		}

		.plain-content {
		padding: 30px 64px 30px 64px;
		}


		div #home  {
		padding: 90px 64px 40px 64px;
		}
		#home p {
			font-size: 48px;
			font-weight: 300;
			line-height: 32px;
		}
		#home span {
			color: #9b59b6;
			font-size: 24px;
			margin: 12px 0 0 4px;
		}

	}




	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {

		.vcard-container {
			width: 480px;
			margin-top: 40px;
		}
		.social-buttons {
			display: none;
		}

		#main-nav {
			display: none;
		}	
		#mobile_row {
			display: inline-block;
		}
		#mobile-nav {
		}
		.tabs li {
		height: 90px;
		line-height: 96px;
		text-align: center;
		width: 25%;
		float: left;
		list-style: none;
		}
		.tabs i {
		font-size: 21px;
		}
		.photo {

		}

		.name {
			display: block;
			float: none;
			width: 100%;
		}
		.position {
			display: block;
			float: none;
			width: 100%;
		}

		.one-half {
			width: 100% !important;
		}
		.full-one     { width: 100%; }
		h3 {
			font-size: 21px;
		}
		.date {
			margin-right: 15px;
			display: inline-block;
			width: 100%;
		}
		.trianglewrap {
			width: 100%;
		}
		.plain-content {
		padding: 30px 40px 30px 40px;
		}
		.wopadd {
			padding: 0 40px 0 40px;
		}
		.grey-content {
			padding: 30px 40px 30px 40px;
		}
		.jobtitle {
			width: 100%;
		}
		.one-third { 
			width: 100% !important;
			margin-right: 0!important;
			margin-bottom: 24px !important;
		}

		div #home  {
		padding: 90px 64px 40px 64px;
		}
		#home p {
			font-size: 48px;
			font-weight: 300;
			line-height: 48px;
		}
		#home span {
			color: #9b59b6;
			font-size: 24px;
			margin: 12px 0 0 4px;
		}

	}


	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {

		.vcard-container {
			width: 300px;
			margin-top: 30px;
		}
		.social-buttons {
			display: none;
		}

		#main-nav {
			display: none;
		}	
		#mobile_row {
			display: inline-block;
		}
		#mobile-nav {
		}
		.tabs li {
		height: 90px;
		line-height: 96px;
		text-align: center;
		width: 25%;
		float: left;
		list-style: none;
		}
		.tabs i {
		font-size: 21px;
		}
		.photo {
			display: none;
		}
		.name {
			display: block;
			float: none;
			width: 100%;
			height: 90px;
			line-height: 90px;
		}
		.position {
			display: block;
			float: none;
			width: 100%;
			height: 90px;
			line-height: 90px;
		}

		div #home  {
		padding: 60px 36px 40px 36px;
		}
		#home p {
			font-size: 42px;
			font-weight: 300;
			line-height: 48px;
		}
		#home span {
			color: #9b59b6;
			font-size: 21px;
			margin: 12px 0 0 4px;
		}

		.copyright {
		display: inline;
		float: left;
		line-height: 64px;
		font-size: 9px;
		text-transform: uppercase;
		color: #fff;
		}

		.one-third { 
			width: 100% !important;
			margin-right: 0!important;
			margin-bottom: 24px !important;
		}
		.plain-content {
		padding: 24px 32px 24px 32px;
		}
		.wopadd {
			padding: 0 32px 0 32px;
		}
		.grey-content {
			padding: 24px 32px 24px 32px;
		}

		.one-half {
			width: 100% !important;
		}

		.date {
			margin-right: 15px;
			display: inline-block;
			width: 100%;
		}
		.trianglewrap {
			width: 100%;
		}

		h3 {
			font-size: 18px;
			line-height: 18px;
		}
		.jobtitle {
			width: 100%;
		}
		h1 {
		font-size: 32px;
		line-height: 43px;
		}

	}

.dtlogo
{
	background: url(../images/dtlogo.png) no-repeat left top;
	width: 255px;
	height: 53px;
	display: block;
}
.savancelogo
{
	background: url(../images/savanceimages.png) no-repeat left top;
	width: 255px;
	height: 53px;
	display: block;
}
.globalimpactlogo
{
	background: url(../images/globalimpactlogo.png) no-repeat left top;
	width: 255px;
	height: 53px;
	display: block;
}
.irangelogo
{
	background: url(../images/irangelogo.png) no-repeat left top;
	width: 255px;
	height: 53px;
	display: block;
}
.itilogo
{
	background: url(../images/itilogo.png) no-repeat left top;
	width: 255px;
	height: 53px;
	display: block;
}
