/* Start of Main rules */
body {height: 4000px}
.container {width: 1170px; margin: auto}
.clearfix {clear: both}
/* End of Main rules */



/* Start of Header (Header = Slider + Navbar) */
.header .slider {height: 600px; background-image: url('../images/slider.jpg'); background-size: cover /* CSS3 */}
.header .slider .intro {text-align: center; color: #FFF; height: 100%; padding-top: 200px}
.header .slider .intro h2 {margin: 0 auto; width: 600px; font-size: 50px; border-top: 4px solid #FFF; border-bottom: 4px solid #FFF; padding: 5px 0}
.header .slider .intro button {background: none; margin-top: 30px; font-size: 30px; border: 2px solid #FFF; font-weight: bold; padding: 10px 30px; color: #FFF}
.header .navbar {background-color: #252F31; color: #FFF; overflow: hidden; text-transform: uppercase}
.header .navbar h2 {float: left}
.header .navbar h2 span {color: #2ECC71}
.header .navbar ul {list-style: none; padding-left: 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.active a, .header .navbar ul li a:hover {color: #30B576}
/* End of Header (Header = Slider + Navbar) */



/* Start of Features */
.features {overflow: hidden; padding-top: 40px; padding-bottom: 50px}
.features .feat {float: left; width: 33.33333%; height: 150px}
.features .feat h2 {text-transform: uppercase; color: #555}
.features .feat p {line-height: 1.7; color: #888}
/* End of Features */



/* Start of About Me */
.about-me {background-color: #F2F2F2; overflow: hidden}
.about-me .image img {width: 100%}
.about-me .image {float: left; width: 40%}
.about-me .info  {float: left; width: 60%}
.about-me .info h2 {margin: 25px 0 20px 40px; color: #555}
.about-me .info > p {margin: 0 0 10px 40px}
.about-me .info > p:last-of-type {margin-top: 25px}
.about-me .info p {line-height: 1.6; color: #666}
.about-me .info .hobbies {overflow: hidden; margin: 15px 0 0 40px}
.about-me .info .hobbies .content {float: left; width: 50%; min-height: 100px; overflow: hidden}
.about-me .info .hobbies .content h3 {color: #555}
.about-me .info .hobbies .content .icon {float: left; width: 12%; margin-right: 5%}
.about-me .info .hobbies .content .icon img {max-width: 100%; margin: 40px 10px 0 0}
.about-me .info .hobbies .content .text {float: left; width: 83%}
.about-me .info .hobbies .content .text p {margin-top: 0}
.about-me .info .hobbies .content .text h3 {margin-bottom: 5px}
/* End of About Me */



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



/* Start of Resume */
.resume {background-color: #F2F2F2; padding-top: 50px; padding-bottom: 70px; text-align: center}
.resume h2 {text-transform: uppercase; font-weight: bold; color: #666}
.resume p {line-height: 1.7; color: #666; padding: 0 40px}
.resume button {margin-top: 15px}
/* End of Resume */



/* Start of My Education */
.my-education {padding-top: 30px; padding-bottom: 30px; overflow: hidden}
.my-education hr {margin: 20px 0; background-color: #999; height: 1px; border: 0}
.my-education .main {width: 50%; float: left; margin-right: 5%}
.my-education .exp {width: 45%; float: left}
.my-education .main h2 {margin: 25px 0 20px 40px; color: #555}
.my-education .main p {margin: 0 0 10px 40px; line-height: 1.6; color: #666}
.my-education .main p:last-of-type {margin-top: 25px}
.my-education .exp h3 {margin-top: 80px; margin-bottom: 10px}
.my-education .exp span {display: block; margin-bottom: 10px}
.my-education .exp span:first-of-type {color: #D999}
.my-education .exp span:last-of-type {background-color: #2DCC70; color: #FFF; display: inline-block; padding: 4px 10px}
.my-education .exp p {line-height: 1.7; color: #777}
/* Start of My Education */



/* Start of Testimonials */
.testimonials {background-color: #F2F2F2; padding-top: 50px; padding-bottom: 50px; text-align: center}
.testimonials q {color: #888; font: italic bold 18px/1.8 Arial, Tahoma}
.testimonials h3 {color: #777; margin-bottom: 30px}
.testimonials ul {list-style: none; padding-left: 0; text-align: center}
.testimonials ul li {width: 15px; height: 15px; border: 2px solid #2DCC70; display: inline-block; cursor: pointer}
.testimonials ul li.active, .testimonials ul li:hover {background-color: #2DCC70}
/* End of Testimonials */



/* Start of Portfolio */
.portfolio {padding-top: 50px; padding-bottom: 70px; text-align: center}
.portfolio h2 {color: #777}
.portfolio p {line-height: 1.7; color: #666; margin-bottom: 30px}
.portfolio .our-work {overflow: hidden}
.portfolio .our-work > div {float: left; width: 33.333333%; margin-bottom: 10px}
.portfolio .our-work > div img {width: 92%; margin: 10px; padding: 3px; border: 1px solid #CCC; background-color: #FFF}
/* End of Portfolio */



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



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



/* Start of My Own Framework */
.my-button {background: none; border: 3px solid #2DCC70; padding: 10px 30px; color: #2DCC70; font-weight: bold}
/* End of My Own Framework */