- New header CSS (two columns + better interaction)

app/widgets/AdminDB/admindb.tpl

@@ -1,6 +1,6 @@
 <div id="admindb" class="tabelem paddedtop" title="{$c->__('db.legend')}">
-    <form>
-        <ul>
+    <form class="flex">
+        <ul class="block large">
             <li class="subheader">{$c->__('db.legend')}</li>
 
             {if="!$connected"}
@@ -42,8 +42,7 @@
                 {/if}
             {/if}
         </ul> 
-        
-        <div class="clear"></div>  
+
         <div class="block">
             <input value="{$dbtype}" disabled/>
             <label for="logLevel">{$c->__('db.type')}</label>

app/widgets/AdminMain/adminmain.tpl

@@ -1,7 +1,7 @@
 <div id="admingen" class="tabelem paddedtop" title="{$c->__('admin.general')}">
 <form name="admin" id="adminform" action="#" method="post">
-    <legend><i class="fa fa-wrench"></i> {$c->__('admin.general')}</legend>
-
+    <br />
+    <h3>{$c->__('admin.general')}</h3>
     <div>
         <label for="da">{$c->__('general.language')}</label>
         <div class="select">
@@ -74,13 +74,10 @@
         <br /><br />
 
     </div>
-    <legend><i class="fa fa-code"></i> {$c->__('websocket.title')}</legend>
-    <div class="clear"></div>
-    
-    <p>
-        {$c->__('websocket.info')}: <code>ws(s)://domain:port</code>
-    </p>
-    
+
+    <br />
+    <h3>{$c->__('websocket.title')}</h3>
+
     <!--{if="!$c->testBosh($conf->boshurl)"}
         <div class="message error">
             {$c->__('bosh.not_recheable')}
@@ -107,41 +104,60 @@
             </dl>
         </div>
     {/if}
-    
-    <div class="message info block">
-        <i class="fa fa-exclamation-triangle"></i> {$c->__('websocket.save_info')}
-    </div>
 
-    <legend><i class="fa fa-check-square-o"></i> {$c->__('whitelist.title')}</legend>
-    <div class="clear"></div>                
+    <ul class="thick">
+        <li class="condensed">
+            <span class="icon bubble color orange">
+                <i class="md md-warning"></i>
+            </span>
+            <span>{$c->__('websocket.info')}: <code>ws(s)://domain:port</code></span>
+            <p>{$c->__('websocket.save_info')}</p>
+        </li>
+    </ul>
 
-    <div>
-        <p>{$c->__('whitelist.info1')}</p>
-        <p>{$c->__('whitelist.info2')}</p>
-    </div>
+    <h3>{$c->__('whitelist.title')}</h3>
 
     <div>
         <input type="text" name="xmppwhitelist" id="xmppwhitelist" placeholder="{$c->__('whitelist.label')}" value="{$conf->xmppwhitelist}" />
         <label for="xmppwhitelist">{$c->__('whitelist.label')}</label>
     </div>
 
-    <legend><i class="fa fa-comment"></i> {$c->__('information.title')}</legend>
-    <div class="clear"></div>
+    <ul class="thick">
+        <li class="condensed">
+            <span class="icon bubble color blue">
+                <i class="md md-info"></i>
+            </span>
+            <p>{$c->__('whitelist.info1')}</p>
+            <p>{$c->__('whitelist.info2')}</p>
+        </li>
+    </ul>
+
+    <br />
+    <h3>{$c->__('information.title')}</h3>
 
     <div>
-        <textarea type="text" name="description" id="description" />{$conf->description}</textarea>
+        <textarea type="text" name="description" id="description" placeholder="{$conf->description}"/>{$conf->description}</textarea>
         <label for="description">{$c->__('information.description')}</label>
     </div>
     <div class="clear"></div>
 
     <div>
+        <textarea type="text" name="info" id="info" placeholder="{$c->__('information.label')}" />{$conf->info}</textarea>
         <label for="info">{$c->__('information.label')}</label>
-        <p>{$c->__('information.info1')}</p>
-        <p>{$c->__('information.info2')}</p>
-        <textarea type="text" name="info" id="info" />{$conf->info}</textarea>
     </div>
 
-    <legend><i class="fa fa-user"></i> {$c->__('credentials.title')}</legend>
+    <ul class="thick">
+        <li class="condensed">
+            <span class="icon bubble color blue">
+                <i class="md md-info"></i>
+            </span>
+            <span>{$c->__('information.info1')}</span>
+            <p>{$c->__('information.info2')}</p>
+        </li>
+    </ul>
+
+    <br />
+    <h3>{$c->__('credentials.title')}</h3>
         
     {if="$conf->user == 'admin' || $conf->pass == sha1('password')"}
         <div class="message error">

app/widgets/Chat/_chat_header.tpl

@@ -1,14 +1,21 @@
-<span id="back" class="icon" onclick="MovimTpl.hidePanel(); Chat_ajaxGet();"><i class="md md-arrow-back"></i></span>
-
-<ul class="active">
-    <li onclick="Chats_ajaxClose('{$jid}'); MovimTpl.hidePanel();">
-        <span class="icon">
-            <i class="md md-close"></i>
-        </span>
-    </li>
-</ul>
-{if="$contact != null"}
-    <h2>{$contact->getTrueName()}</h2>
-{else}
-    <h2>{$jid}</h2>
-{/if}
+<div>
+    <span class="on_desktop icon"><i class="md md-forum"></i></span>
+    <h2>{$c->__('page.chats')}</h2>
+</div>
+<div>
+    <ul class="active">
+        <li onclick="Chats_ajaxClose('{$jid}'); MovimTpl.hidePanel();">
+            <span class="icon">
+                <i class="md md-close"></i>
+            </span>
+        </li>
+    </ul>
+    <h2 class="active r1" onclick="MovimTpl.hidePanel(); Chat_ajaxGet();">
+        <span id="back" class="icon"><i class="md md-arrow-back"></i></span>
+        {if="$contact != null"}
+            {$contact->getTrueName()}
+        {else}
+            {$jid}
+        {/if}
+    </h2>
+</div>

app/widgets/Chat/_chat_header_room.tpl

@@ -1,20 +1,27 @@
-<span id="back" class="icon" onclick="MovimTpl.hidePanel(); Chat_ajaxGet();"><i class="md md-arrow-back"></i></span>
-
-<ul class="active">
-    <li onclick="Rooms_ajaxList('{$room}')">
-        <span class="icon">
-            <i class="md md-menu"></i>
-        </span>
-    </li>
-    <li onclick="Rooms_ajaxRemoveConfirm('{$room}')">
-        <span class="icon">
-            <i class="md md-delete"></i>
-        </span>
-    </li>
-    <li onclick="Rooms_ajaxExit('{$room}'); MovimTpl.hidePanel();">
-        <span class="icon">
-            <i class="md md-close"></i>
-        </span>
-    </li>
-</ul>
-<h2>{$room}</h2>
+<div>
+    <span class="on_desktop icon"><i class="md md-forum"></i></span>
+    <h2>{$c->__('page.chats')}</h2>
+</div>
+<div>
+    <ul class="active">
+        <li onclick="Rooms_ajaxList('{$room}')">
+            <span class="icon">
+                <i class="md md-menu"></i>
+            </span>
+        </li>
+        <li onclick="Rooms_ajaxRemoveConfirm('{$room}')">
+            <span class="icon">
+                <i class="md md-delete"></i>
+            </span>
+        </li>
+        <li onclick="Rooms_ajaxExit('{$room}'); MovimTpl.hidePanel();">
+            <span class="icon">
+                <i class="md md-close"></i>
+            </span>
+        </li>
+    </ul>
+    <h2 class="active r3" onclick="MovimTpl.hidePanel(); Chat_ajaxGet();">
+        <span id="back" class="icon" ><i class="md md-arrow-back"></i></span>
+        {$room}
+    </h2>
+</div>

app/widgets/Contact/_contact_header.tpl

@@ -1,36 +1,50 @@
-<span id="back" class="icon" onclick="MovimTpl.hidePanel(); Contact_ajaxClear();"><i class="md md-arrow-back"></i></span>
-{if="$contactr != null"}
-    <ul class="active">
-        <li onclick="{$edit}">
-            <span class="icon">
-                <i class="md md-edit"></i>
-            </span>
-        </li>
-        <li onclick="{$delete}">
-            <span class="icon">
-                <i class="md md-delete"></i>
-            </span>
-        </li>
-    </ul>
-    <h2>{$contactr->getTrueName()}</h2>
-{else}
-    {if="$contact != null"}
-        <ul>
-            <li onclick="Roster_ajaxDisplaySearch('{$jid}')">
+<div>
+    <span class="icon"><i class="md md-people"></i></span>
+    <h2>{$c->__('page.contacts')}</h2>
+</div>
+<div>
+    {if="$contactr != null"}
+        <ul class="active">
+            <li onclick="{$edit}">
                 <span class="icon">
-                    <i class="md md-person-add"></i>
+                    <i class="md md-edit"></i>
                 </span>
             </li>
-        </ul>
-        <h2>{$contact->getTrueName()}</h2>
-    {else}
-        <ul>
-            <li onclick="Roster_ajaxDisplaySearch('{$jid}')">
+            <li onclick="{$delete}">
                 <span class="icon">
-                    <i class="md md-person-add"></i>
+                    <i class="md md-delete"></i>
                 </span>
             </li>
         </ul>
-        <h2>{$jid}</h2>
+        <h2 class="active r2" onclick="MovimTpl.hidePanel(); Contact_ajaxClear();">
+            <span id="back" class="icon" ><i class="md md-arrow-back"></i></span>
+            {$contactr->getTrueName()}
+        </h2>
+    {else}
+        {if="$contact != null"}
+            <ul>
+                <li onclick="Roster_ajaxDisplaySearch('{$jid}')">
+                    <span class="icon">
+                        <i class="md md-person-add"></i>
+                    </span>
+                </li>
+            </ul>
+            <h2 class="active r2" onclick="MovimTpl.hidePanel(); Contact_ajaxClear();">
+                <span id="back" class="icon" ><i class="md md-arrow-back"></i></span>
+                {$contact->getTrueName()}
+            </h2>
+        {else}
+            <ul>
+                <li onclick="Roster_ajaxDisplaySearch('{$jid}')">
+                    <span class="icon">
+                        <i class="md md-person-add"></i>
+                    </span>
+                </li>
+            </ul>
+            <h2 class="active r2" onclick="MovimTpl.hidePanel(); Contact_ajaxClear();">
+                <span id="back" class="icon" ><i class="md md-arrow-back"></i></span>
+                {$jid}
+            </h2>
+        {/if}
     {/if}
-{/if}
+</div>

app/widgets/Header/_header_account.tpl

@@ -1,4 +1,6 @@
-<a href="{$c->route('main')}" class="classic">
-    <span id="menu" class="icon"><i class="md md-home"></i></span>
-</a>
-<h2>{$c->__('page.account_creation')}</h2>
+<div>
+    <a href="{$c->route('main')}" class="classic">
+        <span id="menu" class="icon"><i class="md md-home"></i></span>
+    </a>
+    <h2>{$c->__('page.account_creation')}</h2>
+</div>

app/widgets/Header/_header_accountnext.tpl

@@ -1,4 +1,6 @@
-<a href="{$c->route('account')}" class="classic">
-    <span id="menu" class="icon"><i class="md md-arrow-back"></i></span>
-</a>
-<h2>{$c->__('page.account_creation')}</h2>
+<div>
+    <a href="{$c->route('account')}" class="classic">
+        <span id="menu" class="icon"><i class="md md-arrow-back"></i></span>
+    </a>
+    <h2>{$c->__('page.account_creation')}</h2>
+</div>

app/widgets/Header/_header_admin.tpl

@@ -1,4 +1,6 @@
-<a href="{$c->route('main')}" class="classic">
-    <span id="menu" class="icon"><i class="md md-home"></i></span>
-</a>
-<h2>{$c->__('page.administration')}</h2>
+<div>
+    <a href="{$c->route('main')}" class="classic">
+        <span id="menu" class="icon"><i class="md md-home"></i></span>
+    </a>
+    <h2>{$c->__('page.administration')}</h2>
+</div>

app/widgets/Header/_header_adminlogin.tpl

@@ -1,4 +1,6 @@
-<a href="{$c->route('main')}" class="classic">
-    <span id="menu" class="icon"><i class="md md-home"></i></span>
-</a>
-<h2>{$c->__('page.administration')}</h2>
+<div>
+    <a href="{$c->route('main')}" class="classic">
+        <span id="menu" class="icon"><i class="md md-home"></i></span>
+    </a>
+    <h2>{$c->__('page.administration')}</h2>
+</div>

app/widgets/Header/_header_chat.tpl

@@ -1,15 +1,17 @@
-<ul class="active">
-    <li onclick="Chats_ajaxAdd()">
-        <span class="icon">
-            <i class="md md-person-add"></i>
-        </span>
-    </li>
-    <li onclick="Rooms_ajaxAdd()">
-        <span class="icon">
-            <i class="md md-group-add"></i>
-        </span>
-    </li>
-</ul>
-<span id="menu" class="on_mobile icon" onclick="MovimTpl.toggleMenu()"><i class="md md-menu"></i></span>
-<span class="on_desktop icon"><i class="md md-forum"></i></span>
-<h2>{$c->__('page.chats')}</h2>
+<div>
+    <ul class="active">
+        <li onclick="Chats_ajaxAdd()">
+            <span class="icon">
+                <i class="md md-person-add"></i>
+            </span>
+        </li>
+        <li onclick="Rooms_ajaxAdd()">
+            <span class="icon">
+                <i class="md md-group-add"></i>
+            </span>
+        </li>
+    </ul>
+    <span id="menu" class="on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="md md-menu"></i></span>
+    <span class="on_desktop icon"><i class="md md-forum"></i></span>
+    <h2 class="r2">{$c->__('page.chats')}</h2>
+</div>

app/widgets/Header/_header_conf.tpl

@@ -1,3 +1,5 @@
-<span id="menu" class="on_mobile icon" onclick="MovimTpl.toggleMenu()"><i class="md md-menu"></i></span>
-<span class="on_desktop icon"><i class="md md-settings"></i></span>
-<h2>{$c->__('page.configuration')}</h2>
+<div>
+    <span id="menu" class="on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="md md-menu"></i></span>
+    <span class="on_desktop icon"><i class="md md-settings"></i></span>
+    <h2>{$c->__('page.configuration')}</h2>
+</div>

app/widgets/Header/_header_contact.tpl

@@ -1,15 +1,17 @@
-<ul class="active">
-    <li onclick="Roster_ajaxDisplaySearch()">
-        <span class="icon">
-            <i class="md md-person-add"></i>
-        </span>
-    </li>
-</ul>
-<span id="menu" class="on_mobile icon" onclick="MovimTpl.toggleMenu()"><i class="md md-menu"></i></span>
-<span class="on_desktop icon"><i class="md md-search"></i></span>
+<div>
+    <ul class="active">
+        <li onclick="Roster_ajaxDisplaySearch()">
+            <span class="icon">
+                <i class="md md-person-add"></i>
+            </span>
+        </li>
+    </ul>
+    <span id="menu" class="on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="md md-menu"></i></span>
+    <span class="on_desktop icon"><i class="md md-search"></i></span>
 
-<form>
-    <div onclick="Roster.init();">
-        <input type="text" name="search" id="rostersearch" autocomplete="off" placeholder="{$c->__('roster.search');}"/>
-    </div>
-</form>
+    <form>
+        <div onclick="Roster.init();">
+            <input type="text" name="search" id="rostersearch" autocomplete="off" placeholder="{$c->__('roster.search');}"/>
+        </div>
+    </form>
+</div>

app/widgets/Header/_header_help.tpl

@@ -1,3 +1,5 @@
-<span id="menu" class="on_mobile icon" onclick="MovimTpl.toggleMenu()"><i class="md md-menu"></i></span>
-<span class="on_desktop icon"><i class="md md-help"></i></span>
-<h2>{$c->__('page.help')}</h2>
+<div>
+    <span id="menu" class="on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="md md-menu"></i></span>
+    <span class="on_desktop icon"><i class="md md-help"></i></span>
+    <h2>{$c->__('page.help')}</h2>
+</div>

app/widgets/Header/_header_main.tpl

@@ -1,20 +1,15 @@
-<!--<ul class="active">
-    <li onclick="Menu_ajaxRefresh()" title="{$c->__('menu.refresh')}">
-        <span class="icon">
-            <i class="md md-refresh"></i>
-        </span>
-    </li>
-</ul>-->
-<span id="menu" class="on_mobile icon" onclick="MovimTpl.toggleMenu()"><i class="md md-menu"></i></span>
-<span class="on_desktop icon"><i class="md md-view-list"></i></span>
-<form>
-    <div>
-        <div class="select">
-            <select onchange="window[this.value].apply()" name="language" id="language">
-                <option value="Menu_ajaxGetAll" selected="selected">{$c->__('menu.all')}</option>
-                <option value="Menu_ajaxGetNews" >{$c->__('menu.news')}</option>
-                <option value="Menu_ajaxGetFeed" >{$c->__('menu.contacts')}</option>
-            </select>
+<div>
+    <span id="menu" class="on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="md md-menu"></i></span>
+    <span class="on_desktop icon"><i class="md md-view-list"></i></span>
+    <form>
+        <div>
+            <div class="select">
+                <select onchange="window[this.value].apply()" name="language" id="language">
+                    <option value="Menu_ajaxGetAll" selected="selected">{$c->__('menu.all')}</option>
+                    <option value="Menu_ajaxGetNews" >{$c->__('menu.news')}</option>
+                    <option value="Menu_ajaxGetFeed" >{$c->__('menu.contacts')}</option>
+                </select>
+            </div>
         </div>
-    </div>
-</form>
+    </form>
+</div>

app/widgets/Post/_post_header.tpl

@@ -1,11 +1,20 @@
-<span id="back" class="icon" onclick="MovimTpl.hidePanel()"><i class="md md-arrow-back"></i></span>
-
-{if="$post != null"}
-    {if="$post->title != null"}
-        <h2>{$post->title}</h2>
-    {else}
-        <h2>{$c->__('post.default_title')}</h2>
-    {/if}
-{else}
-    <h2>Empty</h2>
-{/if}
+<div>
+    <span class="on_desktop icon"><i class="md md-view-list"></i></span>
+    <h2>
+        {$post->node}
+    </h2>
+</div>
+<div>
+    <h2 class="active" onclick="MovimTpl.hidePanel();">
+        <span id="back" class="icon"><i class="md md-arrow-back"></i></span>
+        {if="$post != null"}
+            {if="$post->title != null"}
+                {$post->title}
+            {else}
+                {$c->__('post.default_title')}
+            {/if}
+        {else}
+            Empty
+        {/if}
+    </h2>
+</div>

app/widgets/Roster/roster.tpl

@@ -39,15 +39,8 @@
                 <span
                     class="icon bubble status {{myjid.ajiditems.rosterview.presencetxt}}"
                     style="background-image: url({{::myjid.ajiditems.rosterview.avatar}})">
-                    <!--
-                    <img
-                        class="avatar"
-                        ng-src="{{::myjid.ajiditems.rosterview.avatar}}"
-                        alt="avatar"
-                    />-->
                 </span>
-                <!--<div class="chat on"></div>-->
-                {{myjid.ajiditems.rosterview.name}}
+                <span>{{myjid.ajiditems.rosterview.name}}</span>
                 <p ng-if="myjid.ajiditems.status != ''" class="wrap">
                     <span>{{myjid.ajiditems.status}}</span>
                 </p>

themes/material/css/block.css

@@ -14,6 +14,5 @@
 @media screen and (max-width: 1024px) {
     .flex .block {
         flex: 1 100%;
-        padding: 0;
     }
 }

themes/material/css/style.css

@@ -216,6 +216,108 @@ nav + main {
     transform: translateZ(0);
 }
 
+main > header {
+    position: relative;
+    height: 7rem;
+    overflow: hidden;
+    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
+    z-index: 2;
+}
+
+main > header > div {
+    padding-left: 9rem;
+    position: relative;
+    width: 25%;
+    display: inline-block;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+
+main > header > div > * {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+main > header > div > ul.active {
+    float: right;
+}
+
+main > header > div > ul.active li {
+    float: left;
+    height: 7rem;
+    min-width: 0;
+    line-height: 7rem;
+    width: 7rem;
+    padding: 0;
+    font-size: 4rem;
+}
+
+main > header > div > ul.active li span.icon {
+    left: 1rem;
+}
+
+main > header > div:first-child:nth-last-child(2) ~ div {
+    width: 75%;
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+main > header > div > span.icon {
+    line-height: 7rem;
+    left: 0;
+    width: 8rem;
+    height: 7rem;
+    top: 0;
+    margin: 0;
+}
+
+main > header > div > h2 {
+    padding-left: 9rem;
+    margin-left: -9rem;
+    display: inline-block;
+    padding-right: 3rem;
+    max-width: calc(100% + 10rem);
+    box-sizing: border-box;
+}
+
+main > header > div > h2.r1 { max-width: calc(100% + 2rem); }
+main > header > div > h2.r2 { max-width: calc(100% - 5rem); }
+main > header > div > h2.r3 { max-width: calc(100% - 12rem); }
+
+main > header > div > h2.active:hover,
+main > header > div > span.active:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+}
+
+@media screen and (max-width: 1024px) {
+    main > header > div,
+    main > header > div:first-child:nth-last-child(2) ~ div {
+        width: 100%;
+    }
+
+    main > header > div:first-child:nth-last-child(2) {
+        display: none;
+    }
+}
+/*
+main > header > div > span.action {
+    padding-left: 9rem;
+}
+
+main > header > div > span.action:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+*/
+/*
+main > header > div > a span.icon:hover,
+main > header > div > span.icon:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+*/
+/*
 main > header {
     position: relative;
     min-height: 7rem;
@@ -228,23 +330,57 @@ main > header {
     text-overflow: ellipsis;
 }
 
-main > header > h2 {
+main > header > * {
+    max-width: calc(25% - 7rem);
+    overflow: hidden;
+}
+*/
+/* Two blocks*/
+/*
+main > header > div:first-child:nth-last-child(2) {
+
+}
+main > header > div:first-child:nth-last-child(2) ~ div {
+    max-width: 100%;
+    width: 75%;
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+main > header h2 {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-main > header > form {
-    max-width: calc(25% - 7rem);
+@media screen and (max-width: 1024px) {
+    main > header > div {
+        width: 100%;
+        max-width: 100%;
+    }
+
+    main > header > div:first-child:nth-last-child(2) {
+        display: none;
+    }
+    main > header > div:first-child:nth-last-child(2) ~ div {
+        width: 100%;
+    }
 }
 
+main > header > div > form,
+main > header > div > h2 {
+    max-width: calc(100% - 7rem);
+}*/
+/*
 @media screen and (max-width: 1024px) {
     main > header > form,
     main > header > h2 {
         max-width: calc(100% - 7rem);
     }
 }
-
+*/
+/*
 main > header ul {
     float: right;
 }
@@ -258,7 +394,7 @@ main > header ul li {
     padding: 0;
     font-size: 4rem;
 }
-
+*/
 main > section {
     height: 100%;
     position: relative;
@@ -420,24 +556,6 @@ span.icon.status:after {
     background-color: #DDD;
 }
 
-main > header > a span.icon:hover,
-main > header > span.icon:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-}
-
-main > header > a > span.icon,
-main > header > span.icon {
-    line-height: 7rem;
-    width: 8rem;
-    height: 7rem;
-    margin-top: -3.5rem;
-    left: 0;
-}
-
-main > header ul li span.icon {
-    left: 1rem;
-}
-
 main ul li .control > i {
     margin-left: 0;
 }
@@ -460,11 +578,11 @@ main ul li .control > i {
 }
 
 /* Header */
-
+/*
 header .icon:hover {
     cursor: pointer;
 }
-
+*/
 header.big {
     background-size: cover, cover;
     background-position: center center;