/* Start main rulez */
body {min-width: 1349px;}
.container {width: 1170px;margin: auto}
/* End main rulez */


/* Start header */
.header .slider 
{
    background-image: url('../images/Crisis.jpg');
    background-size: cover;
    height: 600px
}
.header .slider .intro {padding-top: 200px;text-align: center;color: #FFF}
.header .slider .intro h2 
{
    margin: 0 auto;
    font-size: 50px;
    width: 555px;
    border-top: 4px solid #FFF;
    border-bottom: 4px solid #FFF;
    padding: 5px 0;
    color: #FFF
}
.header .slider .intro button 
{
    color: #FFF;
    background: none;
    margin-top: 30px;
    font-size: 20px;
    border: 2px solid #FFF;
    font-weight: bold;
    padding: 10px 30px
}
.header .navbar {background-color: #252F31;color: #FFF;overflow: hidden}
.header .navbar h2 {color: #FFF}
.header .navbar h2 span {color:#2ecc71}
.header .navbar ul {list-style: none;padding: 0;overflow: hidden;float: right}
.header .navbar ul li {float: left;padding: 10px}
.header .navbar ul li a {color: #FFF;text-decoration: none}
.header .navbar ul li a:hover {color: #30B576}
.header .navbar ul li a:active {color: #30B576}
/* End header */


/* Start features */
.features {overflow: hidden;padding: 40px 0 50px 0}
.features .feat {width: 33.3333%;height: 150px}
.features .feat h2 {text-transform: uppercase}
.features .feat p {padding: 0 20px 0 0}
/* End features */


/* Start about me */
.about {background-color: #F2F2F2;overflow: hidden}
.about .image {width: 40%}
.about .image img {width: 100%}
.about .info {width: 60%}
.about .info h2 {margin: 25px 0 20px 40px}
.about .info > p {margin: 0 0 10px 40px}
.about .info > p:last-of-type {margin-top: 25px}
.about .info .hoppies {overflow: hidden;margin: 15px 0 0 40px}
.about .info .hoppies .content {width: 50%;overflow: hidden}
.about .info .hoppies .content .icon {width: 12%;margin-right: 5%}
.about .info .hoppies .content .icon img {max-width: 100%;margin: 32px 10px 0 0}
.about .info .hoppies .content .text {width: 83%}
.about .info .hoppies .content .text p {margin-top: -4px}
.about .info .hoppies .content .text h3 {margin-bottom: 5px}
/* End about me */


/* Start my skills */
.myskills {padding: 30px 0 50px 0;overflow: hidden}
.myskills .skills, .myskills .progress {width: 50%}
.myskills .skills h2 {margin: 25px 0 20px 40px}
.myskills .skills p {margin: 0 0 10px 40px}
.myskills .skills p:last-of-type {margin-top: 25px}
.myskills .skills button {margin: 20px 0 0 40px}
.myskills .progress .technique {margin-left: 50px}
.myskills .progress .technique div {background-color: #F2F2F2;height: 25px}
.myskills .progress .technique div span 
{
    background-color: #2DCC70;
    height: 25px;
    display: block;
    line-height: 25px;
    text-align: right;
    color: #FFF;
    font-weight: bold
}
/* End my skills */


/* Start resume */
.resume {background-color: #F2F2F2;padding: 50px 0 60px 0;text-align: center}
.resume h2 {text-transform: uppercase;font-weight: bold;color: darkslategray}
.resume p {padding: 0 60px}
.resume button {margin-top: 10px}
/* End resume */


/* Start my education */
.education {padding: 30px 0;overflow: hidden}
.education hr {margin: 20px 0;background-color: #888;height: 1px;border: 0}
.education .main {width: 50%;margin-right: 5%}
.education .main h2 {margin: 25px 0 20px 40px}
.education .main p {margin: 0 0 10px 40px}
.education .main p:last-of-type {margin-top: 25px}
.education .exp {width: 45%}
.education .exp h3 {margin-top: 73px;margin-bottom: 10px}
.education .exp span {display: block;margin-bottom: 12px}
.education .exp span:first-of-type {color: #999}
.education .exp span:last-of-type 
{
    color: #FFF;
    background-color: #2DCC70;
    display: inline-block;
    padding: 6px 10px
}
/* End my education */


/* Start Testemonials */
.Testemonials {background-color: #F2F2F2;padding: 50px 0 50px 0;text-align: center}
.Testemonials q {color: #888;font: italic bold 17px/1.7 Arial,"Times new roman"}
.Testemonials h3 {margin-bottom: 30px}
.Testemonials ul {padding-left: 0}
.Testemonials ul li 
{
    width: 10px;
    height: 10px;
    border: 2px solid #2DCC70;
    display: inline-block;
    cursor: pointer
}
.Testemonials ul li.active, 
.Testemonials ul li:hover {background-color: #2DCC70}
/* End Testemonials */


/* Start portfolio*/
.portfolio {padding: 50px 0 70px 0;text-align: center}
.portfolio p {margin-bottom: 30px;margin-left: 30px}
.portfolio .works {overflow: hidden}
.portfolio .works > div {width: 33.3333%;float: left}
.portfolio .works > div img 
{
    width: 95%;
    margin: 10px;
    padding: 3px;
    background-color: #FFF;
    border: 1px solid #2DCC70
}
/* End portfolio*/


/* Start contact me */
.contact {background-color: #252F31;overflow: hidden;padding: 50px 0 70px 0}
.contact .info {width: 50%;margin-right: 5%}
.contact h2 {color: #FFF;margin-left: 40px;}
.contact p {margin-left: 40px;color: #6A6E71}
.contact p strong {color: #D1D6DA}
.contact .form {width: 45%}
.contact .form label {display: block;color: #D1D6DA;margin: 10px 0}
.contact .form input[type="text"] 
{
    background-color: #4B5557;
    color: #FFF;
    padding: 10px;
    border: 0;
    width: 90%;
    margin-bottom: 10px
}
.contact .form textarea 
{
    background-color: #4B5557;
    color: #FFF;
    padding: 10px;
    border: 0;
    width: 90%;
    margin-bottom: 10px;
    height: 300px
}
.contact .form input[type="submit"] 
{
    background-color: #191E22;
    color: #FFF;
    padding: 10px 20px;
    border: 0;
    margin-top: 10px
}
/* End contact me */


/* Start footer */
.footer 
{
    background-color: #191E22;
    color: #6A6E71;
    padding: 20px 0;
    text-align: center;
    overflow: hidden
}
.footer ul {list-style: none;padding-left: 0;margin: 10px 0 0 0}
.footer ul li {display: inline-block}
.footer ul li img {width: 32px;height: 32px}
/* End footer */


/* Start my framework */
.mybutton 
{
    background: none;
    border: 3px solid #2DCC70;
    padding: 10px 30px;
    color:#2DCC70;
    font-weight: bold
}
.fl-left {float: left}
p {line-height: 1.7;color: #666}
h2, h3 {color: #555}
.clearfix {clear: both}
/* End my framework */