.clearBoth{
    clear:both;
}

body
{
    font-size: 100%; 
    margin: 0px;
    padding: 0px;
    font-family: Arial;
    color: #181818;
    height:100%;
}

#transparency
{
   width: 100%;
   //height: 750%;
   background: rgba(255, 255, 255, .9); 
   visibility: hidden;
   position: absolute;
   z-index: 4;
}
    

#upper_panel
{
    margin: 0;
    padding-top: 3%;
    padding-bottom: 10%;
    background-color: #181818;

    width: 100%;
    color:#fff;
}


    .center_90
    {
        padding-left: 5%;
        padding-right: 5%;   
        width: 90%; 
    }  
    
    
      .left_50
    {
        width: 50%; 
        float: left;
        text-align: left;       
    } 
    
    .right_50
    {
        width: 50%; 
        float: left;
        text-align: right;
    }    

    
        #logo
        {
            //background-color: aqua;           
        }
        
            #logo_surname
            {
                font-size: 240%;
            }
            
            #logo_title
            {
                padding-top: 3%;
                font-size: 150%;
                text-decoration:underline;
            }
        
        #menu
        {
            padding-top: 2%;
            font-size: 130%;
            z-index: 3;     /************************************************************************************************************************/
        }
               
            .menu_item
            {
                
                float:right;
                padding-left: 3%;
                cursor: pointer;                
            } 
            
            
            #home_menu
            {
                color: #ffa200;
            }             
            
            #portfolio_menu, #cv_menu, #contact_menu
            {
                color: #fff;                
            }
            
            #home_menu:hover, #portfolio_menu:hover, #cv_menu:hover, #contact_menu:hover
            {
                color: #ffa200;
            }  
            
            #home_menu:active, #portfolio_menu:active, #cv_menu:active, #contact_menu:active
            {
                color: #d86304;
            } 
                  
            
       #social_icon
       {
           padding-top: 3%;
           float:right;
       }
       
        .social_icon_item
        {
            margin-right:5%;
            float: right;   
            margin-top: 5%;
        }
        
        .social_icon_item:first-child
        {
            margin-right:0%;         
        }        
        
        #facebook_like
        { 
            width:100%;
            height: 100%;
        }        
        
        .social_icon_item:hover
        {
            cursor: pointer;
        } 
        
        .social_icon_item:active
        {
            cursor: pointer;
        }    
        
         .social_icon_item img
        {
            opacity:0.6;
            filter:alpha(opacity=60);            
        }
        
         .social_icon_item img:hover
        {
            opacity:0.8;
            filter:alpha(opacity=80);            
        }        

         .social_icon_item img:active
        {
            opacity:1.0;
            filter:alpha(opacity=100);            
        }          
        
        
    #main_panel
    {
        margin: 0;
        background-color: #fff;
        width: 100%;
        color:#fff;  
        max-height: 50px;
    }
        
            
        .main_panel_title
        {           
            color: #181818;
            font-size: 280%;
            padding-bottom: 7%;
            padding-left: 5%;
        }
        
        #home_container
        {
            
        }

        #cv_container    
        {
            display:none;
            color:#000
        }        
        
        #portfolio_container, #contact_container     
        {
            padding-top: 5%;
            display:none;
            color:#000
        }
        
        #home_intro
        {
            margin-top:-42%;
            padding: 3%;
            background: rgba(0, 0, 0, .6); 
            -moz-border-radius: 15px;
            border-radius: 15px;            
            position: absolute;
            margin-left:16%;
            width: 68%;
            color:#fff;
            z-index:3;
            font-size: 200%;
            color:#fff;
            text-align: center;
        }   
        
        #line1
        {
            padding-bottom: 1%;
            color: #ffa200; 
            font-size: 230%;
            font-weight: bold; 
            letter-spacing: 6px;
        }        
        
        #line2, #line3, #line4, #line5
        {
            padding-top: 2%;
            font-style:italic;
            font-size: 130%;
            font-weight: normal; 
            letter-spacing: 3px;
        }
        
        .project_panel_box
        {
            width: 90%;
            height:90%;
            display:block;
            margin:0 auto;            
            z-index: 1;
            margin-bottom: 8%;
        }   
             .strangecircle
            {
                position: relative;
                padding-left: 2%; 
                padding-right: 2%;
                width: 12%;
                -moz-border-radius: 1em 4em 1em 4em;
                border-radius: 1em 4em 1em 4em;      
                background-color: #ffa200;
                z-index: 2;
                cursor: pointer;
                text-align: center;
                color: #fff;
            }      
            
            .strangecircle:hover
            {
               background-color: #ff7200;
            }
            
            .strangecircle:active
            {
               background-color: #d86304;
            }            
            
        .project_panel
        {
            position: relative;
            z-index: 1;           
            width: 100%;
            height: 100%; 
            margin-top: -2%;
            margin-bottom: 3%; 
            padding-top: 3%;
            padding-bottom: 6%;           
            background-color: #f5f5f5;
            -moz-border-radius: 15px;
            border-radius: 15px;
            box-sizing: border-box;
            border: 1px solid #727272;
            display: block;
        }   
                    
            .strangecircle_title
            {                    
                font-size: 100%;
                line-height: 400%;
                font-weight: bold;               
            }

            .circle
            {
                position: absolute;
                margin-top: -1000px;                
                height: 100px;
                width: 100px;
                -moz-border-radius: 50px;
                border-radius: 50px;    
                background-color: #ffa200;
                z-index: 1;
            }       
            
            .project_description
            {
                width: 41%;
                height: 100%;  
                font-size: 140%;   
                color: #181818;
                text-align: justify;
                float: left;
                padding-right:4%;
                padding-left: 4%;               
            }
            
                .project_description_paragraph
                {
                   padding-top: 3%;
                }
                
   
                .project_description_paragraph ul
                {
                    margin: 0;
                    list-style-image: url("../images/icon-checkmark.png");
                }
                
                     .project_description_paragraph ul li { line-height:30px; }
                
            .project_gallery
            {
                width:48%;
                float:left;
                box-sizing: border-box;                
            }
            
            
         .project_gallery img
        {
            opacity:0.5;
            filter:alpha(opacity=50);            
        }
        
         .project_gallery img:hover
        {
            opacity:0.8;
            filter:alpha(opacity=80); 
            cursor: pointer;
        }        

         .project_gallery img:active
        {
            opacity:1.0;
            filter:alpha(opacity=100);    
            cursor: pointer;
        }              
            
            
                
            .view_details, .url_link a
            {
                font-size: 140%; 
                padding-top: 2%;
                margin-right: 4%;
                color:#ffa200; 
                /*padding-right: 15%;
                padding-top: 2%;*/
                cursor: pointer;
                text-decoration:none;
                float:right;
            }
            
            .view_details
            {
                margin-left: 4%;
            }
            
            .url_link a
            {
                margin-left: 18%;
            }
             .view_details:link, .url_link a:link
            {
                color:#ffa200; 
                text-decoration:none;
                outline: none;
            }  
                        
             .view_details:visited, .url_link a:visited
            {
                color:#ffa200; 
                text-decoration:none;
                outline: none;
            }                
                    
            
            .view_details:active, .url_link a:active
            {
                color: #d86304;
                outline: none;
                text-decoration:none;
            }      

            .view_details:hover, .url_link a:hover
            {
                color: #ff7200;
                text-decoration:underline;
            } 
            
            .orange_dots 
            {
                width: 100%;
                border: 0;
                border-bottom: 2px dotted #ffa200;
            }       
            

/****************************************************** CONTACT *********************************************************/

    .contact_form
    {
        margin: 0 0 0 5%;
        padding: 2% 3% 2% 3%;
        background-color: #f5f5f5;
        -moz-border-radius: 15px;
        border-radius: 15px;
        border: 1px solid #727272; 
        box-sizing: border-box;
        width: 35%;
        float: left;
        font-weight: bold;
    }
    
    #contact_info
    {
        width:30%;
        float:right;
        color:#181818;   
        font-size:110%;
    }
    
        .contact_text:first-child
        {
            padding-bottom: 0;
            padding-top:0;
            width:100%;
        }
        
        .contact_text
        {
            padding-bottom: 3%;
            padding-top:10%;
            width:100%;
        }
    
        .mail_link a:link, .skype:link
        {
            color:#ff7200;
            cursor: pointer;
            outline: none;
            text-decoration:none;
        }
        .mail_link a:visited, .skype:visited
        {
            color: #ff7200;
            outline: none;
            text-decoration:none;
        }      
        
        .mail_link a:hover, .skype:hover
        {
            color: #ff7200;
            text-decoration:underline;
        }          
        
         .mail_link a:active, .skype:active
        {
            color: #d86304;
            outline: none;
            text-decoration:none;
        }      
        
        #skype_img
        {
            width: 100%;
            height: 100%;
        }
        
        .mobile
        {
            color:#ff7200;  
        }

        .form_item
        {
           margin-bottom: 5%;
           margin-left: 12%;
           padding:1%;
           float:right;
           text-align: left;
        }     
        
        

/****************************************************** CONTACT *********************************************************/