body { /*background: #ffffff;*/ font-family: 'Montserrat bold', sans-serif; /*font-style: normal;*/ font-size: 20px; line-height: 26px; font-weight:400; overflow-x: hidden; background: linear-gradient( #FFDA3F,#FF787C); -webkit-filter: -webkit-gradient(linear, right 10%, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))) } /*--------------------------------------- Typography -----------------------------------------*/ h1,h2,h3,h4,h5,h6 { font-style: normal; font-weight: 700; letter-spacing: 0.5px; color:white; } h1 { font-size: 62px; padding-bottom: 14px; margin-bottom: 0px; } h2 { text-align: justify; font-size: 32px; line-height: 42px; } h3 { font-size: 26px; } h4 { color: white; font-size: 12px; font-weight: normal; letter-spacing: 2px; } p { color: white; font-size: 15px; font-weight: 350; line-height: 23px; letter-spacing: 0px; } strong { font-weight: 400; } .btn-success:focus { background-color: #000; border-color: transparent; } /*--------------------------------------- General -----------------------------------------*/ html{ -webkit-font-smoothing: antialiased; } a { color: white; text-decoration: underline; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; text-decoration: none !important; } a:hover, a:active, a:focus { color: white; outline: none; text-decoration: underline; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #portfolio, #about, #blog, #contact, #single-project, #blog-single-post { padding-top: 80px; padding-bottom: 120px; } .section-title { position: relative; padding-bottom: 62px; text-align: center; } .section-title h3 { color: #555; font-weight: 400; letter-spacing: 4px; } /*--------------------------------------- Preloader section -----------------------------------------*/ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background: none repeat scroll 0 0 #ffffff; } .sk-spinner-wordpress.sk-spinner { background-color: #bdc3c7; width: 40px; height: 40px; border-radius: 40px; position: relative; -webkit-animation: sk-innerCircle 1s linear infinite; animation: sk-innerCircle 1s linear infinite; } .sk-spinner-wordpress .sk-inner-circle { display: block; background-color: #ffffff; width: 16px; height: 16px; position: absolute; border-radius: 8px; top: 5px; left: 5px; } @-webkit-keyframes sk-innerCircle { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes sk-innerCircle { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*--------------------------------------- Intro -----------------------------------------*/ h1.intro-title{ /*font-family: 'Montserrat', sans-serif;*/ font-size: 100px; font-weight: 700; line-height: 100%; padding-top: 20px; height:320px; position:relative; display: table; /*color: #FF1A73;*/ text-align: left; text-justify: inter-word; letter-spacing: -1px; width: 95%; margin-left: auto; margin-right: auto; } #text0{ color: #FF1A73; display: table-row; /*height: 400px;*/ width: 100%; position: absolute; left:20px; top:20px; /*text-align: justify;*/ /*text-justify: inter-word;*/ } #text2{ color: #33DF8A; display: table-row; /*height: 400px;*/ width: 100%; position: absolute; left: 10px; top:10px; /*text-align: justify;*/ /*text-justify: inter-word;*/ } #text3{ color: #FFF123; display: table-row; /*height: 400px;*/ width: 100%; position: absolute; left: 0px; top:0px; /*text-align: justify;*/ /*text-justify: inter-word;*/ } .title-desc { /*font-family: 'PT Serif', serif;*/ font-size:18px; font-weight: 700; line-height: 26px; width: 100%; /*max-width: 333px; */ /*margin: 0 auto;*/ color: white; position:relative; text-align: left; left:50px; margin-left: auto; margin-right: auto; } /*--------------------------------------- Main Navigation -----------------------------------------*/ .navbar-default { background: transparent; padding: 18px 0; border: none; margin-top: 62px; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: transparent; } .navbar-default .navbar-brand { padding-top: 6px; } .navbar-default .navbar-brand .fa { color: #000; font-size: 42px; } .navbar-default .navbar-nav li a { color: white; font-size: 18px; font-weight: 700; letter-spacing: 1px; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; padding-right: 22px; padding-left: 22px; } .navbar-default .navbar-nav > li a:hover { color:#FF1A73 !important; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #777; background-color: transparent; } .navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav .active > a { color:#FF1A73; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #FF1A73; background-color: transparent; } .navbar-default .navbar-toggle { border: none; padding-top: 10px; } .navbar-default .navbar-toggle .icon-bar { background: #bdc3c7; border-color: transparent; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: transparent; } /*--------------------------------------- Home section -----------------------------------------*/ #home { background-size: cover; background-position: center center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; text-align: center; padding-top: 60px; padding-bottom: 40px; height:100vh; } #home hr { width: 82px; margin-top: 32px; } /*--------------------------------------- About section -----------------------------------------*/ #about .text-center { padding-bottom: 42px; } #about .col-md-8 { padding-left: 0px; } #about .col-md-8 img { padding-right: 22px; padding-bottom: 22px; } #about hr { width: 100px; margin-top: 42px; margin-bottom: 42px; } #about ul { padding-left: 22px; } #about ul li { color: #777; font-size: 16px; font-weight: 400; padding-top: 2px; padding-bottom: 2px; } /*--------------------------------------- Portfolio section -----------------------------------------*/ #portfolio small { color: #f0f0f0; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; } #portfolio .portfolio-thumb { position: relative; padding: 0; margin-top: 32px; } #portfolio .portfolio-thumb .portfolio-overlay { position: absolute; background: #FF1A73; color: #ffffff; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; text-align: center; vertical-align: top; opacity: 0; transition: all 0.4s ease-in-out; } #portfolio .portfolio-item { position: absolute; top:50%; left: 50%; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } #portfolio .portfolio-thumb:hover .portfolio-overlay { opacity: 0.9; } #portfolio .text-center { padding-top: 62px; } /*--------------------------------------- Single Project section -----------------------------------------*/ #single-project { text-align: center; } #single-project .col-md-12, #single-project .col-md-6, #single-project .col-md-4 { padding-left: 0px; padding-bottom: 22px; } #single-project .col-md-12 { padding-top: 42px; } #single-project .text-center strong { display: block; padding-top: 12px; } #single-project a { color: #FF1A73; font-weight: bold; letter-spacing: 1px; padding-left: 14px; } /*--------------------------------------- Contact section -----------------------------------------*/ #contact .col-md-6, #contact .col-md-12 { padding-left: 0px; } #contact .form-control { border: 1px solid #f0f0f0; box-shadow: none; margin-top: 10px; margin-bottom: 10px; transition: all 0.4s ease-in-out; } #contact .form-control:hover { border-color: #777; } #contact input, #contact select { height: 50px; } #contact input[type="submit"] { background: #222; border-radius: 100px; border: none; color: #ffffff; font-weight: 400; transition: all 0.4s ease-in-out; } #contact input[type="submit"]:hover { background: #000; } /*--------------------------------------- Blog section -----------------------------------------*/ .blog-post-thumb { border-bottom: 1px solid #f0f0f0; padding-top: 32px; padding-bottom: 62px; margin-bottom: 32px; } .blog-post-thumb:last-child { border-bottom: 0px; padding-bottom: 32px; margin-bottom: 0px; } .blog-post-image { padding-bottom: 18px; width: 100%; } .blog-post-title a { color: white; } .blog-post-title a:hover { color: #000; } .blog-post-format { padding-bottom: 22px; } .blog-post-format span { letter-spacing: 0.5px; padding-right: 12px; } .blog-post-format span a { color: #333; } .blog-post-format span img { display: inline-block; width: 42px; margin-right: 4px; } .blog-post-des blockquote { margin: 22px; } .blog-post-des .btn { border-radius: 100px; color: #777; font-weight: 400; letter-spacing: 1px; padding: 14px 28px; margin-top: 26px; transition: all 0.4s ease-in-out; } .blog-post-des .btn:hover { background: #000; border-color: transparent; color: #ffffff; } .blog-author { border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; padding-top: 32px; padding-bottom: 32px; margin-top: 42px; margin-bottom: 42px; } .blog-author .media img { display: inline-block; width: 90px; margin-right: 12px; } .blog-author .media a, .blog-comment .media h3 { color: #444; font-size: 18px; letter-spacing: 1px; } .blog-comment { border-bottom: 1px solid #f0f0f0; padding-bottom: 32px; margin-bottom: 42px; } .blog-comment .media:nth-child(3) { padding-top: 18px; } .blog-comment .media img { width: 80px; margin-right: 12px; } .blog-comment .media h3 { display: inline-block; padding-right: 14px; } .blog-comment h3, .blog-comment-form h3 { padding-bottom: 18px; } .blog-comment-form .col-md-4 { padding-left: 0px; } .blog-comment-form .form-control { box-shadow: none; border: 1px solid #f0f0f0; margin-top: 10px; margin-bottom: 10px; transition: all 0.4s ease-in-out; } .blog-comment-form .form-control:hover { border-color: #777; } .blog-comment-form input { height: 45px; } .blog-comment-form input[type="submit"] { background: #222; border-radius: 100px; border: none; color: #ffffff; font-weight: 400; transition: all 0.4s ease-in-out; } .blog-comment-form input[type="submit"]:hover { background: #000; border-color: transparent; } /*--------------------------------------- Blog Single Post section -----------------------------------------*/ #blog-single-post .blog-post-des h3 { padding-top: 16px; } /*--------------------------------------- Footer section -----------------------------------------*/ footer { border-top: 1px solid #f0f0f0; padding: 100px 0px; position: relative; } footer .col-md-3 .fa { font-size: 42px; } footer a { color: #555; } footer hr { border-color: #ffffff; margin-top: 42px; margin-bottom: 22px; } footer .footer-copyright { padding-top: 16px; } /*--------------------------------------- Social icon -----------------------------------------*/ .social-icon { position: relative; padding: 0; margin: 0; text-align: center; } .social-icon li { display: inline-block; list-style: none; } .social-icon li a { color: #777; cursor: pointer; font-size: 16px; text-decoration: none; transition: all 0.4s ease-in-out; text-align: center; vertical-align: middle; position: relative; margin: 22px 12px 10px 12px; } .social-icon li a:hover { color: #000; transform: scale(1.1); } /*--------------------------------------- Mobile Responsive -----------------------------------------*/ @media (max-width: 767px) { h1 { font-size: 38px; } h2 { font-size: 32px; line-height: 48px; } h3 { font-size: 22px; } .section-title h2 { font-size: 22px; line-height: 35px; } .navbar-default { margin-top: 0px; text-align: center; } #about .col-md-8 img { padding-right: 0px; } #blog-single-post .blog-post-title h2 { font-size: 29px; line-height: 40px; } footer { text-align: center; } footer .col-md-4 { padding-top: 42px; } } /*SOCIAL MEDIA*/ /*.fa-linkedin { background: #007bb5; color: white; }*/ /*HEADSHOTS*/ .headshots{ border-radius: 50%; width: 200px; height: 200px; }