/* player.css ------------*/
@import url('_global.css');
@import url('_forms.css');
@import url('_modals.css');
@import url('_colorpicker.css');

html, body {
	height:100%;
}

#player { text-align:center; background:#fff url('/theme/img/player/bg_player.png'); }
#player #save-form { height:100%; }

/*******************************************************/

/**
 * Banner flash
 */

.banner { position:fixed; top:0; left:0; right:0; z-index:200; background:#fff; padding:15px; color:#555; transition:all .5s ease; box-shadow:0 1px 3px rgba(0, 0, 0, 0.1); }
.banner.hide { top:-100px; }

/*******************************************************/

/**
 * WRAPPER
 */

#wrapper { min-width:320px; }
#panel.opened ~ #wrapper { padding-right:80px; padding-top:110px; padding-bottom:80px; padding-left:80px; }
#panel.opened ~ #wrapper #intro { height:80%; }

#panel.opened ~ #you { display:none; }

/*******************************************************/

/**
 * YOU
 */

 /* Rotate sync arrows -----------------*/
@-webkit-keyframes refreshPlayer {
    0% {
        -webkit-transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
    }
}

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

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

@keyframes refreshPlayer {
    0% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
    }
}

 #you #howdy { z-index:10; top:18px; text-align:center; width:100%; color:#999; font-weight:600; position:absolute; left:0; right:0; }
 #you #share { float:left; vertical-align:middle; z-index:20; position:relative; }
 #you #share .fa-link { vertical-align:middle; font-size:18px; margin-right:5px; cursor:pointer; }
 #you #share .faq { color:#ccc; vertical-align:middle; font-size:15px; margin-left:4px; }
 #you #share .faq span { width:200px; padding:10px; line-height:100%; }
 #you #share .permalink { -webkit-appearance:none; border:0; margin:0; border-radius:7px; background-color:#FFFBB5; color:#444; font-size:13px; font-weight:600; padding:4px 7px; font-family:"Lucida Console", Monaco, monospace; cursor:pointer; }
 #you #actions { float:right;  z-index:20; position:relative; }
 #you #actions a { text-decoration:none; color:#9C9C9C; font-size:20px; margin:0 10px; }
 #you #actions a#refresh-player span { width:220px; padding:15px 12px; }
 #you #actions a#panel-toggle span { width:100px; right:-10px; }
 #you #actions a#panel-toggle:after { right:2px; }
 #you #actions a#banner-close { border-left:1px dotted #D5CDB4; padding-left:20px; }

  #you #actions a#refresh-player.refreshing { color:#ea4c89;
	 -webkit-animation-name: refreshPlayer;
    -webkit-animation-duration:1s;
    -webkit-animation-timing-function:ease;
    -webkit-animation-iteration-count:infinite;

    -moz-animation-name: refreshPlayer;
    -moz-animation-duration:1s;
    -moz-animation-timing-function:ease;
    -moz-animation-iteration-count:infinite;  

    -ms-animation-name: refreshPlayer;
    -ms-animation-duration:1s;
    -ms-animation-timing-function:ease;
    -ms-animation-iteration-count:infinite; 

    animation-name: refreshPlayer;
    animation-duration:1s;
    animation-timing-function:ease; 
    animation-iteration-count:infinite;
 }
 #you #actions a#refresh-player.refreshing span,
 #you #actions a#refresh-player.refreshing:after { display:none; }
 #you #actions a#refresh-player.refreshed { color:#8ABA56; }
 #you #actions a#refresh-player.disabled { color:#DFDFDF; cursor:default; }

 /*******************************************************/

/**
 * Tooltips
 */

.tooltip { position:relative; }
.tooltip span { display:none; position:absolute; top:150%; box-shadow:0 1px 2px rgba(0,0,0,.1); text-align:center; color:#fff; padding:8px; font-weight:600; border-radius:5px; font-size:15px; background:#8aba56; right:-15px; }
.tooltip:after { content:''; position:absolute; display:none; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #8aba56; top:110%; right:0; }
.tooltip:hover span { display:block; }
.tooltip:hover:after { display:block; }

/*******************************************************/

/**
 * PANEL
 */

/* Show menu */
@-webkit-keyframes showMenu { 0% { top:-100px; } 100% { top:0; } }

/* Panel open state */
#panel { padding:45px 80px 34px; position:absolute; top:0; left:0; right:0; }
#panel .links { display:none; }
#panel.opened .links { background:transparent; z-index:50; display:block; }
#panel.opened.scrolled { background:rgba(0,0,0,.85); border-bottom:3px solid #000; padding:35px 80px 24px; z-index:150; box-shadow:0 3px 10px rgba(0,0,0,.15); position:fixed; -webkit-animation:showMenu .4s; }

/* Links */
#panel .links.right { float:right; }
#panel .links.left { float:left; }
#panel .links.right li { float:right; }
#panel .links.left li { float:left; margin-right:35px; display:block; }
#panel .links li { font-size:18px; position:relative; }
#panel .links li a { color:#888; text-decoration:none; }
#panel .links li a:hover { color:#fff; }
#panel .links li .button { border-radius:5px; line-height:20px; padding:5px 10px; font-family:arial; color:#fff; }
#panel .links li .button.primary { background-color:#ea4c89; padding:8px 20px; font-size:20px; box-shadow:none; margin-left:15px; font-weight:bold; }

/* Preview button */
#panel .preview-close { top:0; z-index:100; text-decoration:none; color:#ccc; position:fixed; top:0; right:0; background-color:#000; padding:8px 10px 8px 18px; color:#fff; border-bottom-left-radius:3px; } 
#panel .preview-close i { color:#888; margin-left:5px; }
#panel.opened .preview-close { top:-100px; }

/* text */
#panel .links li .text { color:#DADADA; font-weight:600; padding-left:12px; font-size:15px; float:left; line-height:115%; margin-top:5px; text-transform:uppercase; }
#panel .links li .text span { display:block; }
#panel .links li .text a { font-size:15px; }

/* background */
.backgrounds,
.networks { margin-top:-10px; }

/* Color chooser */
.choose-color { float:left; background:#ccc; border:3px solid #fff; border-right:12px solid #fff; position:relative; border-radius:3px; width:35px; height:35px; padding:0; background-size: cover; }
.choose-color i { position:absolute; right:-10px; top:15px; font-size:7px; color:#000; }

/* add networks */
.add-networks { float:left; background:#ccc; border:3px solid #fff; border-right:12px solid #fff; position:relative; border-radius:3px; width:35px; height:35px; padding:0; }
.add-networks i { position:absolute; right:-10px; top:15px; font-size:7px; color:#000; }

/*******************************************************/

/**
 * Dropdown
 */

.dropdown { display:none; position:absolute; left:-20px; top:60px; z-index:100; background:#fff; border-radius:5px; box-shadow:0 3px 5px rgba(0,0,0,.1); }
.dropdown:after { content:''; width:0; height:0; position:absolute; top:-10px; left:31px; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #FFF; }
.dropdown .dropdown-inner a { padding:10px; }
.dropdown.show { display:block; }

/*******************************************************/

/**
 * Backgrounds
 */

.backgrounds .color-picker-holder { padding:10px; }
.backgrounds .button { display:block; background:#8aba56; color:#fff; padding:0; margin:10px; font-size:15px; font-weight:600; }
.backgrounds .button i { color:#CBF1A2; float:right; line-height:150%; }
.backgrounds #bgurl { position:absolute; top:0; left:0; right:0; bottom:0; opacity:0; width:215px; cursor:pointer; }
.backgrounds .bg-action { position:relative; }
.backgrounds .bg-action a { margin-top: 0; }

.backgrounds .bg-action .upload { display: block; margin-bottom: 0; }
.backgrounds .bg-action span { font-size: 11px;color: #C2C2C2;padding: 0;display: block;text-align: center;margin-bottom: 7px;}
.backgrounds .bg-action .remove { display: none; }

.backgrounds.hasbgimage .bg-action { padding: 10px 0 0 0; width: 185px; }

.backgrounds.hasbgimage .bg-action .remove { display: block !important; }
.backgrounds.hasbgimage .bg-action .upload,
.backgrounds.hasbgimage .bg-action span { display: none !important; }

.backgrounds.hasbgimage .bg-action .button { background: #FF4141; color: #fff !important; }
.backgrounds.hasbgimage .bg-action .button i { line-height: 99%; font-weight: bold; color: #fff !important; font-size: 20px;}

.backgrounds.hasbgimage .bg-current { display: none; }
.backgrounds.hasbgimage .bg-action input { z-index:-1; }

/*******************************************************/

/**
 * Add networks
 */

.networks .dropdown-triger { background-color:transparent; border-color:transparent; }

.networks .dropdown { width:270px; }
.networks .dropdown-inner { overflow:hidden; padding:1px 0; }
.networks .dropdown label { font-size:22px; float:left; width:20px; margin-right:9px; text-align:center; line-height:0; margin-top:18px; margin-left:5px; }
.networks .dropdown .desc { margin-left:35px; line-height:100%; color:#aaa; margin-top:35px; font-size:11px; }
.networks .dropdown input { width:83%; float:left; }
.networks .dropdown input[disabled] { color:#bbb; }
.networks .dropdown .field { margin-bottom:0; overflow:hidden; border-bottom:1px solid #eee; padding:10px; }
.networks .dropdown .field:last-child { border-bottom:none; }
.fa-dribbble,
.networks #network-dribbble { color:#ea4c89 !important; }
.fa-twitter,
.networks #network-twitter { color:#04aceb !important; }
.fa-facebook,
.networks #network-facebook { color:#49639e !important; }
.fa-linkedin,
.networks #network-linkedin { color:#4875B4 !important; }
.fa-instagram,
.networks #network-instagram { color:#554138 !important; }
.fa-github,
.networks #network-github { color:#333333 !important; }
.fa-envelope { color:#969696 !important; }

.networks .fa-envelope { font-size:19px !important; }


/*******************************************************/

/**
 * INTRO
*/

#player #intro { width:100%; position:relative; background-color:#000; background-size:cover; text-align:center; background-attachment: fixed; }
#player #panel.opened ~ #wrapper #intro { border-top-left-radius:8px; border-top-right-radius:8px; }
#player #panel.opened ~ #wrapper #intro-gradient { border-top-left-radius:8px; border-top-right-radius:8px; }
#player #intro-pitch { position:relative; z-index:30; line-height:2.5em; width:100%; }
#player #intro-pitch h2 { line-height:1; padding:0 10%; line-height:1.3em; }
#player #intro-pitch a {  color: #FFF; text-decoration: none; border-bottom: 2px solid rgba(255, 255, 255, 0.2); line-height: 1; display: inline-block; }
#player #intro-pitch p { margin-bottom:1.3em; line-height:100%; font-size:20px; }
#player #intro-pitch .player-avatar { border-radius:50%; box-shadow:1px 1px 8px rgba(0,0,0,.5); }

#player #wrapper { height:100%; }
#player #intro { height:100%; }
#player #intro-inner { position:absolute; top:0; right:0; bottom:0; left:0; }
#player #intro-pitch { max-width:1080px; margin:0 auto; display:table; height:100%; vertical-align:middle; }
#player #intro-pitch-inner { display:table-cell; vertical-align:middle; }

/*******************************************************/

/**
 * MORE TRIGGER
 */

#more { background-color:#f4f6f6; }
#player #intro #more-trigger { position:absolute; bottom:40px; z-index:100; width:100%; }
#player #intro #more-trigger a { text-decoration:none; color:#fff; font-size:14px; letter-spacing:3px; font-weight:600 !important; border-bottom:1px solid rgba(255,255,255,.5); text-transform:uppercase; }
#player #intro #more-trigger a span { letter-spacing:0; }

/*******************************************************/

/**
 * SECTIONS
 */

.section { padding:75px 5% 55px; text-align:center; overflow:hidden; }
.section h3 { font-size:30px; color:#4b514b; margin-bottom:.9em; font-weight:normal; padding:0 5%; }
.section .empty { font-size:20px; color:#666; }
.section .empty i { font-size:35px; margin-right:5px; vertical-align:sub; }
.section .empty i.fa-dribbble { color:#EA4C89; }
.section .empty i.fa-tag { color:#8ABA56; }
.section .empty em { font-size:14px; display:block; font-style:normal; color:#aaa; }

/*******************************************************/

/**
 * WORK
 */

#work { padding-bottom:75px; }
#work .shots { list-style:none; display:none; }
#work div .shots:first-child { display:block; }
#work .shots li { width:300px; height:225px; display:inline-block; margin:15px 22px; }
#work .shots li a { color:#aaa; text-transform:uppercase; font-size:12px; width:300px; height:225px; background-size:contain; text-decoration:none; border-radius:5px; display:table; position:relative; }
#work .shots li .likes { font-size:25px; vertical-align:middle; background-color:rgba(234,76,137,0); color:#fff; top:0; left:0; bottom:0; right:0; border-radius:inherit; display:table-cell; opacity:0; transition:all .3s ease; color:#fff; }
#work .shots li .likes:hover { background-color:rgba(234,76,137,.75); opacity:1; }
#work .shots li .likes strong { display:block; padding:0 30px; text-transform:none; font-weight:normal; font-size:20px; margin-bottom:15px; }
#work .shots li .likes i { margin:0 0 0 20px; }
#work .shots li h3 { font-weight:600 !important; margin-bottom:20px !important; display:block; }
#work .shots img { max-width:300px;  border-radius:5px; }
#work #showmore { text-decoration:none; font-size:18px; font-weight:600; background-color:#fff; color:#999; padding:3px 12px; border-radius:5px; display:inline-block; margin-top:20px; }

/*******************************************************/

/**
 * SKILLS
 */

#tags { list-style:none; margin:1.4em auto 0; width:80%; }
#tags .tag { display:inline-block; background:rgba(0, 0, 0, 0.2); margin:4px 5px 0px; padding:6px 10px; font-size:20px; border-radius:5px; color:rgba(255, 255, 255, 0.65); line-height:100%; }


/*******************************************************/

/**
 * Networks bottom
 */

#networks { padding:60px 0 0; background:#fff; }
#networks h3 { color:#777; font-size:20px; text-transform:uppercase; margin-bottom:1.2em; font-weight:600; }
#networks li { display:inline-block; margin:0 25px 10px; }
#networks li a { display:block; }
#networks li a i { font-size:40px; -webkit-transition:all .2s ease; }
#networks li i:hover { -webkit-transform:scale(1.15); }

/*******************************************************/

/**
 * Footer
 */

#footer { background-color:#fff; padding:45px 20px 45px; color:#777; }
#footer a { color:#EA4C89; text-decoration:none; border-bottom:2px solid #B1B1B1; display:inline-block; height:20px; }

/*******************************************************/

/**
 * SAVE MODAL
 */

.close { font-size:30px; font-style:normal; position:absolute; top:20px; right:20px; color:#aaa; cursor:pointer; }
.close:hover { color:#fff; }
#save-modal h3 { font-size:23px; color:#fff; font-weight:500; margin-bottom:1; text-align:center; }
#save-modal p { color:#ccc; font-size:18px; margin-bottom:1.5em; margin-top:0; padding:0; }
#save-modal b { color:#fff; }
#save-modal input { font-size:25px; width:330px; margin:0 auto; padding:8px 12px; border:none; margin-bottom: 15px; }
#save-modal button { font-size:22px; padding:10px 30px; font-weight:500; border-radius:5px; width:330px; }


/*******************************************************/

/**
 * Player Mobile
 */

@media only screen and (max-width: 780px) {
	html,
	body,
	#player #save-form,
	#player #wrapper,
	#player #intro,
	#player #intro-pitch {
		height:auto;
	}

	#player #intro-pitch { display:block; }
	#player #intro-pitch-inner { display:block; }
	#player #intro-pitch p { margin-bottom:.8em; }
	#player #intro-inner { padding:40px 0; position:relative; top:auto; right:auto; bottom:auto; left:auto; }
	#more-trigger { display:none; }

	#tags .tag { font-size:17px; }

	.section h3 { font-size:25px; margin-bottom:.4em; }
	#work { padding:45px 5% 40px !important; }

	#work .shots li { height:175px; width:233px; }
	#work .shots li a { height:175px; width:233px; }

	#panel,
	#panel.scrolled { padding:35px 20px 20px !important; }
	#panel.opened ~ #wrapper { padding-left:0; padding-right:0; padding-bottom:0; padding-top:90px; }
	#player #panel.opened ~ #wrapper #intro { border-radius:0; }
	#panel .backgrounds { display:none; }
	#panel #preview { display:none; }
	#panel .text { display:none; }
	.dropdown { left:0; }
	.dropdown:after { left:10px; }

	#save-modal { margin-left:-160px; width:320px; }
	#save-modal button,
	#save-modal input { width:270px; }
}