Sitenin anasayfasında foto veya video oynatılıyor normalde.
Resme göre ayarlamıştım zar zor bir arkadaşın da yardımı ile.
Ama şimdi video hazırlanmış, video eklemek istediler.
Tam ekran nasıl oynatabilirim acaba?
Şu alana şu veya xxx yere şu şekilde gibi önerilere de açığım.
/*------------------------------------------------------------------
[Main Stylesheet]
---- SarpStudio ----
Project:LightHouse
Version:1.3.1
Last change:26.02.2015
-------------------------------------------------------------------
[Table of contents]
Slider(l: 55)
Menu(l: 110)
Section Defaults(l: 190)
About Us(l: 240)
Mission(l: 310)
Work(l: 350)
Circles(l: 430)
Video(l: 470)
Services(l: 520)
Features(l: 580)
Testimonials(l: 610)
Prices(l: 650)
Clients(l: 720)
Blog(l: 740)
Newsletter(l: 820)
Contact(l: 880)
Contact Form(l: 900)
About Me (l: 980)
About Restaurant(l: 1020)
Footer(l: 1040)
Portfolio - work(l: 1100)
Blog Full(l: 1140)
Blog Single(l: 1200)
Team Single(l: 1250)
Comments(l: 1270)
Sidebar(l: 1370)
Widgets(l: 1490)
Transitions(l: 1640)
Loader(l: 17100)
-------------------------------------------------------------------*/
body{
background:url([url]http://www.minervaik.com/arkaplan.jpg[/url]) no-repeat center center fixed;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Titillium Web', sans-serif;
}
img{
max-width: 100%;
}
/* SLIDER */
ul.banner li {
height: 105%;
}
ul.banner li video, ul.banner li iframe {
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
min-height: 100%;
min-width: 100%;
}
ul.banner li > div {
width: 100%;
height: 100%;
display: table;
}
ul.banner li > div > div {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.bx-wrapper .bx-viewport {
-moz-box-shadow: 0;
-webkit-box-shadow: 0;
box-shadow: 0;
border: 0;
left: 0;
background: transparent;
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
position: absolute;
bottom: 15px;
width: 100%;
}
.bx-wrapper, .bx-viewport {
position: relative;
margin: 0;
padding: 0;
width: 100% !important;
height: 100% !important;
}
/* MENU */
#menu {
width: 100%;
z-index: 999;
background-color: white;
padding: 13px 0;
background:url([url]http://www.minervaik.com/arkaplan.jpg[/url]) no-repeat center top fixed;
border-bottom: 4px solid #dddddd;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#menu ul {
padding: 0;
margin: 0;
text-align: center;
}
#menu ul li {
font-size: 15px;
display: inline-block;
margin: 0 10px;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
}
#menu ul li ul.sub-menu { display:none; }
#menu ul li > ul.sub-menu {
max-width: 100%;
position: absolute;
padding-bottom: 100px;
z-index: 3421;
}
#menu ul li:hover > ul.sub-menu {
display: block;
}
#menu ul li > ul.sub-menu li { display: block !important; }
#menu ul li > ul.sub-menu li > ul { padding: 0; max-width: 100%; position: relative; padding-top: 0; padding-bottom: 10px; border-top: 2px solid #ebebeb; }
#menu ul li > ul.sub-menu li { margin: 0; /*text-align: left;*/ background: white; padding-left: 10px; padding-right: 10px; }
#menu ul li a, .navbar-collapse a {
color: #ffffff;
text-decoration: none;
}
#menu ul li.current_page_item a, #menu ul li a:hover {
color: #000000;
}
#menu .logo {
display: inline-block;
margin: auto 10px;
}
.mobile-logo { padding-left: 10px; }
.navbar-header.pull-right { margin-left: 15px; margin-top:4px; }
#menu .logo h1 a, #menu .mobile-logo h1 a{
color: #686868;
text-decoration: none;
}
nav.visible-xs {
position: fixed;
top:0;
width: 100%;
z-index: 4324234234234;
}
nav.visible-xs ul {
display: block;
font-family: 'CaviarDreams', 'Roboto' !important;
font-size: 18px;
padding: 10px 0;
font-weight: bold;
color: inherit;
}
nav.visible-xs ul li {
display: block;
text-align: center;
}
nav.visible-xs ul.sub-menu {
font-size: 16px;
font-weight: lighter;
}
.mobile-logo img { max-height: 46px; width: auto; margin-top: 5px; }
/* SECTION defaults */
section {
clear:both;
padding: 80px 0;
}
section h3{
color: #676767;
}
section h2.section-title {
margin: 0;
font-size: 20px;
color: #343434;
font-weight: 600;
text-transform: uppercase;
}
section hr.section-hr {
font-size: 20px;
border-top: 2px solid #343434;
width: 20px;
margin: 25px auto 0 auto;
}
section h2.item-title {
margin: 0;
font-size: 26px;
font-weight: 300;
color: #686868;
}
section .about-txt p {
font-weight: 300;
font-size: 16px;
color: #686868;
}
section a.button {
cursor: pointer;
padding: 10px 20px;
margin:5px;
border: 2px solid #c7c7c7;
border-radius: 0 5px 0 5px;
text-decoration: none;
color: #666;
display: inline-block;
}
section a.button:hover {
border: 2px solid #666666;
}
/* ABOUT US */
.about .about-txt { margin-bottom: 50px; }
.about .hover { position: relative; border-radius: 0 5px 0 5px; overflow: hidden; }
.about .hover img { max-width: 100%; height: auto; }
.about .hover img:hover+.overlay { opacity: 1; visibility: visible; }
.about .overlay:hover { opacity: 1; visibility: visible; }
.about .overlay {
visibility: hidden;
opacity: 0;
position: absolute;
top:0;
left:0;
right:0
bottom:0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
.about .overlay .social {
display: table;
width: 100%;
height: 100%;
}
.about .overlay .social .items {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
}
.about .overlay .social .items a i.fa { width: 14px; }
.about .overlay .social .items a {
color: white;
padding: 7px 10px;
border-radius: 50%;
border: 2px solid white;
}
.about .overlay .social .items a:hover {
background-color: white;
color: #343434;
}
.about-item a {
color: inherit;
text-decoration: none;
}
.about-item strong {
font-size: 19px;
margin-top: 20px;
margin-bottom: 0;
display: block;
color: #686868;
}
.about-item p {
font-size: 16px;
color: #686868;
}
.about-item .social a {
margin: auto 5px;
}
/* MISSION */
.mission {
background-size: cover;
}
.missions {
margin-top: 70px;
}
@media screen and (max-width: 767px) {
.missions {
text-align: center;
}
}
.missions-item .icon {
}
.missions-item .icon i {
font-size: 35px;
color: #666666;
border: 2px solid #666666;
border-radius: 0 5px 0 5px;
padding: 30px;
margin: 0 auto;
width: 130px;
max-width: 100%;
display: inline-block;
}
.missions-item:hover .icon, .missions-item:hover .icon i {
border-color: #343434;
color: #343434;
}
.missions-item .desc strong {
margin-top: 20px;
display:block;
color: #343434;
}
.missions-item .desc ul {
list-style: none;
}
.missions-item .desc ul li:before {
content: "- ";
}
.missions-item .desc ul li {
padding: 5px 0;
color: #676767;
}
/* WORK */
.work .filter, .work .loadmore {
margin: 25px 0;
}
.work .filter a, .loadmore a {
cursor: pointer;
padding: 10px 20px;
margin:5px;
border: 2px solid #999;
border-radius: 0 5px 0 5px;
text-decoration: none;
color: #666;
display: inline-block;
}
.work .filter a:hover, .work .filter a.active, .loadmore a:hover {
border-color: #666;
}
.work .isotope .item .hover {
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.80);
opacity: 0;
visibility: hidden;
overflow: hidden;
width: 100%;
height: 100%;
}
.work .isotope .item img:hover+.hover, .work .isotope .item .hover:hover {
opacity: 1;
visibility: visible;
}
.work .isotope .item .hover:hover .bottom {
bottom:0;
}
.work .isotope .item .hover .bottom {
width: 100%;
height: 100px;
background-color: white;
position: absolute;
bottom: -100px;
padding: 30px;
}
/*mobile/tablet-fix*/
@media screen and (max-width: 991px) {
.work .isotope .item .hover .bottom {
bottom: 0;
}
}
.work .isotope .item .hover .bottom h5 { font-size: 19px; margin: 0; color: #666; }
.work .isotope .item .hover .bottom p { font-size: 16px; margin: 0; color: #666; }
.work .isotope .item .hover .bottom i {
font-size: 20px;
margin-top: 11px;
color: #666;
}
.work .isotope .item .hover .top {
width: 100%;
height: 100%;
display: table;
}
.work .isotope .item .hover .top > div {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.work .isotope .item .hover .top div i {
margin-bottom: 50px;
font-size: 25px;
color: #fff;
}
/* CIRCLES */
.circles {
background-color: #f5f5f5;
}
.circles .circ {
margin-bottom: 60px;
}
.circles .circ .circ-txt {
position: absolute;
bottom: -30px;
left: calc(50% - 25px);
}
.circles .circ .circ-txt i {
font-size: 40px;
margin-bottom: 39px;
}
.circles .circ .circ-txt p {
font-size: 30px;
min-width: 50px;
}
.circles .circ h3 {
position: absolute;
left: 0;
}
/* VIDEO */
.video {
position: relative;
padding: 240px 0;
background-size: cover;
overflow: hidden;
}
.video h2 {
display: inline-block;
color: white;
margin: 10px;
}
.video a {
cursor: pointer;
}
.video video {
position: absolute;
top:0;
left:0;
width: 100%;
z-index:-1;
visibility: hidden;
}
.vid h2 {
font-weight: bold;
font-size: 35px;
}
.video-embed {
padding: 0 !important;
}
.video-embed iframe {
width: 100%;
}
.acf-map {
width: 100%;
height: 400px;
border: #ccc solid 1px;
margin: 20px 0;
}
/* SERVICES */
#services .row, #pricing .row{
margin-right: 0px;
margin-left: 0px;
}
.services .services-item {
margin-top: 140px;
}
.services .services-item .item-top {
position: absolute;
top: -110px;
background-color: white;
border-radius: 50%;
border: 2px solid #c7c7c7;
width: 180px;
height: 180px;
font-size: 60px;
}
.services .services-item .item-top i {
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 33px);
color: #c7c7c7;
width: 65px;
}
.services .services-item .item-body {
border: 2px solid #c7c7c7;
border-radius: 0 5px 0 5px;
padding: 110px 15px 15px 15px;
}
.services .services-item * {
color: #c7c7c7;
border-color: #c7c7c7;
}
.services .services-item:hover .item-body {
background-color: #f5f5f5;
}
.services .services-item:hover *, .services .services-item .section-title:hover .item-top i {
color: #343434!important;
border-color: #686868;
}
.services .services-item:hover .item-body a.button {
background-color: white;
}
.services .services-item .section-title{
color: #6b6b6b;
}
.services p{
color: #919191!important;
}
/* FEATURES */
.features {
padding: 80px 0 0 0;
}
.features h2 {
font-size: 28px;
}
.features .feature-txt {
padding-bottom: 80px;
}
.features .feature-txt hr {
margin-left: 0 !important;
}
.features .feature-txt ul {
list-style: none;
}
.features .feature-txt ul li {
padding: 7px 0;
font-size: 22px;
color: #686868;
}
.features .feature-txt a.button {
border-color: #686868;
margin-left: 23px;
}
/* TESTIMONIALS */
.testimonial {
padding: 120px 0;
}
.testimonial .bx-pager {
width: 200px;
right: 0;
bottom: -20px;
}
.testimonial ul.testimonialx li img { width: auto; max-width: 100%; display: inline-block; }
.testimonial ul.testimonialx li img.seperator { margin: 0 30px; }
.testimonial ul.testimonialx li img.main {
border: 2px solid white;
border-radius: 50%;
max-width: 100%;
width: auto;
}
.testimonial ul.testimonialx .testimonial-txt {
color: white;
display: inline-block;
}
.testimonial ul.testimonialx .testimonial-txt p {
font-size: 26px;
}
.testimonial .bx-wrapper .bx-pager.bx-default-pager a.active {
background: rgba(255,255,255,1);
}
.testimonial .bx-wrapper .bx-pager.bx-default-pager a {
background: rgba(255,255,255,0.4);
}
/* PRICES */
.price .price-item {
margin-top: 120px;
}
.price-item ul li {
margin: 10px 0;
color: #959595!important;
}
.price .price-item .item-top {
position: absolute;
top: -110px;
background-color: white;
border-radius: 50%;
border: 2px solid #c7c7c7;
width: 180px;
height: 180px;
font-size: 60px;
}
.price .price-item .item-top h1 {
position: absolute;
top: calc(50% - 40px);
left: calc(50% - 55px);
color: #717171;
width: 110px;
font-size: 40px;
font-weight: bold;
}
.price .price-item .item-body {
border: 2px solid #c7c7c7;
border-radius: 0 5px 0 5px;
padding: 110px 15px 15px 15px;
}
.price .price-item * {
color: #c7c7c7;
border-color: #c7c7c7;
list-style: none;
}
.price .price-item:hover .item-body {
background-color: #f5f5f5!important;
}
.price .price-item:hover *, .price .price-item:hover .item-top h1 {
color: #343434!important;
border-color: #686868;
}
.price .price-item:hover .item-body a.button {
background-color: white;
}
.price .price-more {
font-size: 26px;
color: #686868;
margin-bottom: 25px;
}
.price .price-item .section-title{
color: #717171;
}
/* CLIENTS */
.clients .carousel {
padding-top: 50px;
clear:both;
}
/* BLOG */
.blog .isotope-blog {
margin-top: 50px;
}
.blog .isotope-blog .item .hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.80);
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.blog .isotope-blog .item img:hover+.hover, .blog .isotope-blog .item .hover:hover {
opacity: 1;
visibility: visible;
}
.blog .isotope-blog .item .hover:hover .bottom {
bottom:0;
}
.blog .isotope-blog .item .hover .bottom {
width: 100%;
height: 100px;
background-color: white;
position: absolute;
bottom: -100px;
padding: 30px;
}
/*mobile/tablet-fix*/
@media screen and (max-width: 991px) {
.blog .isotope-blog .item .hover .bottom {
bottom: 0;
}
}
.blog .isotope-blog .item .hover .bottom h5 { font-size: 19px; margin: 0; color: #666; }
.blog .isotope-blog .item .hover .bottom p { font-size: 16px; margin: 0; color: #666; }
.blog .isotope-blog .item .hover .bottom i {
font-size: 20px;
margin-top: 11px;
color: #343434;
}
.blog .isotope-blog .item .hover .top {
width: 100%;
height: 100%;
}
.blog .isotope-blog .item .hover .top i {
margin-left: 20px;
margin-top: 20px;
font-size: 25px;
color: #343434;
}
.blog .loadmore {
margin: 50px 0;
}
/* NEWSLETTER */
.newsletter {
/*padding: 80px 0;*/
}
.newsletter i {
font-size: 24px;
color: white;
background-color: #686868;
padding: 37px;
border-radius: 0 5px 0 5px;
}
.newsletter h3 {
margin-top: 30px;
margin-bottom: 40px;
font-size: 26px;
color: #686868;
}
.newsletter span {
color: #343434;
}
.newsletter input {
border: 0;
border-radius: 0 5px 0 5px;
margin: 10px -5px;
}
.newsletter input:focus {
outline: 0
}
.newsletter input.email {
padding: 15px 35px;
background-color: #eaeaea;
color: #808080;
width: 300px;
}
.newsletter input[type='submit']{
padding: 15px 35px;
background-color: #686868;
color: white;
font-weight: bold;
width: 200px;
margin-bottom: 14px;
}
/* CONTACT */
.contact {
padding: 80px 0 0 0;
}
.contact #map {
width: 100%;
height: 600px;
margin-top: 50px;
}
#map img { max-width: none; }
/* CONTACT-FORM */
.contact-form {
color: white;
}
.contact-form i {
font-size: 36px;
}
.contact-form span {
font-size: 26px;
}
.contact-form form {
padding-top: 50px;
margin-top: 50px;
}
.contact-form input, .contact-form textarea {
background: transparent;
width: 100%;
margin: 5px 0;
padding: 8px 10px;
border: 2px solid #383838;
border-radius: 0 5px 0 5px;
color: grey;
-moz-box-shadow: 0;
-webkit-box-shadow: 0;
box-shadow: 0;
resize: none;
font-size: 16px;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #4f4f4f;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #4f4f4f;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #4f4f4f;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #4f4f4f;
}
.contact-form input:focus, .contact-form textarea:focus {
border-color: #4f4f4f;
outline: 0;
color: white;
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
}
.contact-form input[type='submit']{
width: auto;
padding: 15px 40px;
}
.contact-form input[type='submit']:hover {
background-color: white;
color: #343434;
}
/* About Me */
.aboutme {
/*padding: 80px 0;*/
}
.aboutme .aboutme-img > div {
width: 100%;
height: 100%;
display: table;
}
.aboutme .aboutme-img > div > div {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: bottom;
}
a.share-social i {
padding: 7px 10px;
color: #b3b3b3;
border: 1px solid #b3b3b3;
border-radius: 50%;
}
a.share-social i:hover {
color: white;
background-color: #686868;
border: 1px solid #686868;
}
/* About restaurant */
.about-restaurant {
/*padding: 80px 0;*/
}
.about-restaurant .about-restaurant-img > div {
width: 100%;
height: 100%;
display: table;
}
.about-restaurant .about-restaurant-img > div > div {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: bottom;
}
/* FOOTER */
.footer {
background-color: #f5f5f5;
padding: 0;
}
.footer p {
font-size: 18px;
margin: 37px 0;
color: #7a7c80;
}
.footer a.toTop i {
position: absolute;
right: 0;
font-size: 24px;
padding: 38px 22px 38px 22px;
color: #686868;
}
.footer .social i {
font-size: 24px;
padding: 38px 22px 38px 22px;
color: #686868;
border-bottom: 6px solid #f5f5f5;
}
.footer .social i:hover {
background-color: white;
padding: 38px 22px 32px 22px;
border-bottom: 6px solid black;
}
.footer .social i.fa-facebook:hover, .footer .social i.fa-facebook-square:hover {
border-color: #3B5998;
color: #3B5998;
}
.footer .social i.fa-google-plus:hover, .footer .social i.fa-youtube:hover {
border-color: rgb(201, 44, 25);
color: rgb(201, 44, 25);
}
.footer .social i.fa-linkedin:hover, .footer .social i.fa-linkedin-square:hover {
border-color: #007bb6;
color: #007bb6;
}
.footer .social i.fa-skype:hover {
border-color: #12A5F4;
color: #12A5F4;
}
.footer .social i.fa-vimeo-square:hover {
border-color: #aad450;
color: #aad450;
}
.footer .social i.fa-pinterest:hover {
border-color: #cb2027;
color: #cb2027;
}
@media screen and (max-width: 767px) {
.footer .col-md-12 div {
width: 100%;
float: left;
text-align: center;
}
}
/* Portfolio - work */
body#portfolio .work .item .top i.icon2 {
bottom: 55px;
right: 5px;
position: absolute;
font-size: 18px;
color: #686868;
}
.portfolio-full {
padding: 80px 0 0 0;
}
.portfolio-full .portfolio-slider {
margin: 50px 0;
}
.portfolio-full .bx-wrapper .bx-prev {
left: 0;
}
.portfolio-full hr {
max-width: 570px;
margin-top: 50px;
}
.portfolio-full img { max-width: 100%; height: auto; }
.portfolio-full video, .portfolio-full iframe {
width: 100%;
}
/* Blog full */
.blog-full {
padding: 80px 0;
}
.blog-full .blog-item {
padding: 50px 0;
}
.blog-full .blog-item span {
text-decoration: underline;
}
.blog-full .blog-item img, .blog-full .blog-item video {
border-radius: 0 5px 0 5px;
max-width: 100%;
height: auto;
}
.blog-full .blog-item:hover .overlay, .blog-full .blog-item .overlay:hover {
opacity: 1;
visibility: visible;
}
.blog-full .blog-item .overlay {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
position: absolute;
top: 0;
left: 0;
border-radius: 0 5px 0 5px;
opacity: 0;
visibility: hidden;
}
.blog-full .blog-item .overlay > div {
display: table;
width: 100%;
height: 100%;
}
.blog-full .blog-item .overlay > div > div {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
}
.blog-full .blog-item i {
color: #686868;
font-size: 24px;
padding: 26px 43px;
background-color: white;
border-radius: 0 5px 0 5px;
cursor: pointer;
}
.blog-full .blog-item.blog-video video {
width: 100%;
border-radius: 0 5px 0 5px;
max-height: 500px;
}
.blog-full hr {
max-width: 570px;
margin-top: 50px;
}
/* BLOG Single */
.blog-single {
padding: 80px 0;
}
.blog-single .blogsingle-slider {
/*margin-top: 50px;*/
}
.blog-single .bx-wrapper .bx-viewport {
left: 0;
}
.blog-single h5 span {
text-decoration: underline;
}
.blog-single h5 span.categories-list{
text-decoration: none;
}
.blog-single h5 span.categories-list a{
color: #333;
}
.blog-single .pull-right {
padding-top: 33px;
}
.blog-single hr.cb {
margin: 30px 0;
}
.blog-single .title {
margin-bottom: 20px;
}
.blog-single video, .blog-single iframe {
width: 100%;
max-height: 600px;
margin-bottom: 30px;
}
.blog-single iframe{height:600px}
.blog-single .bx-wrapper {
margin-bottom: 30px;
}
.blog-single .bx-wrapper div {
max-height: 600px;
}
/* TEAM single */
.teamsingle-slider img {
border-radius: 0 5px 0 5px;
}
/* COMMENTS */
ul.comments li.comment {
list-style: none;
padding: 50px 0;
}
ul.comments ul.children, ul.comments li.comment ul {
padding-left: 50px;
}
.comment-desc h4 {
display: inline-block;
margin-top: 0;
}
.comment-img, .comment-desc {
display: inline-block;
}
.comment-text {
display: block;
}
.comment-img {
padding-right: 15px;
}
a.comment-reply-link, #cancel-comment-reply-link {
color: inherit;
}
ul.children:before {
content: " ";
position: absolute;
width: 175px;
height: 1px;
border-bottom: 1px solid #e9e7e7;
display: block;
}
div#respond {
padding: 20px 0;
position: relative;
width: 100%;
clear: both;
display: block;
float: left;
background-color: white;
z-index: 22;
}
div#respond:before {
top: 15px;
position: absolute;
width: 100%;
border-bottom: 1px solid #e9e7e7;
height: 1px;
content: " ";
}
div#respond input[type="submit"]{
float: right;
margin-right: 15px;
cursor: pointer;
padding: 10px 20px;
margin: 5px;
border: 2px solid #c7c7c7;
border-radius: 0 5px 0 5px;
text-decoration: none;
color: #666;
display: inline-block;
background-color: transparent;
}
div#respond input[type="submit"]:hover {
border: 2px solid #666;
}
div#respond input, div#respond textarea {
border: 2px solid #f5f5f5;
border-radius: 0 5px 0 5px;
height: 40px;
padding: 10px 20px;
color: #666;
background-color: #f5f5f5;
margin: 15px 0;
box-shadow: 0 !important;
-moz-box-shadow: 0 !important;
-webkit-box-shadow: 0 !important;
}
div#respond input:focus, div#respond textarea:focus {
color: #666;
background-color: white;
border-color: #c7c7c7;
outline: 0 !important;
}
div#respond textarea {
min-height: 95px;
}
/* Sidebar */
.blog-sidebar {
}
.single-sidebar {
padding-left:30px;
padding-right: 0px;
}
.blog-sidebar div {
clear: both;
}
.blog-sidebar ul {
list-style: none;
}
.blog-sidebar img {
max-width: 100%;
height: auto;
}
.blog-sidebar select {
max-width: 100%;
}
.blog-sidebar #calendar_wrap #wp-calendar {
background-color: transparent;
}
.blog-sidebar #wp-calendar caption { margin-bottom: 5px; }
.blog-sidebar #wp-calendar * { text-align: center; padding: 0 10px; }
.blog-sidebar #wp-calendar tfoot * { text-align: left; }
.blog-sidebar #wp-calendar thead { border-bottom: 1px solid black; }
.blog-sidebar #wp-calendar tbody tr { line-height: 1.8; }
.blog-sidebar #wp-calendar td#today { font-weight: 800; }
.blog-sidebar #wp-calendar td a { text-decoration: underline !important; }
.blog-sidebar #calendar_wrap thead tr th { margin: 0 10px; }
.blog-sidebar a {
color: #808080;
font-size: 16px;
}
.blog-sidebar a:hover {
color: #343434;
text-decoration: none;
}
.blog-sidebar li { display:block; clear:both; }
.blog-sidebar li.cat-item {
text-align: right;
display: block;
clear: both;
}
.blog-sidebar li.cat-item ul, .blog-sidebar li.page_item ul, .blog-sidebar ul.menu ul {
padding-left: 10px !important;
}
.blog-sidebar li.cat-item ul li, .blog-sidebar li.page_item ul li {
max-width: 100% !important;
}
.blog-sidebar li.cat-item a {
float: left;
}
.blog-sidebar li.cat-item:hover {
color: #343434;
text-decoration: none;
}
.blog-sidebar li.cat-item a:before {
content: 'f105 ';
font-weight: bolder;
font-family: FontAwesome;
padding-right: 5px;
color: inherit;
}
.blog-sidebar cite {
margin-bottom: 15px;
display: block;
}
.blog-sidebar form#searchform label.screen-reader-text, .blog-sidebar form#searchform input[type='submit'] {
display: none;
}
.blog-sidebar form#searchform input#s {
width: 100%;
border: 1px solid #888;
padding: 3px 23px 3px 3px;
background-image: url('../img/search.jpg');
background-repeat: no-repeat;
background-position: 100%;
border-radius: 0 5px 0 5px;
}
.blog-sidebar form#searchform input#s:focus {
outline: 0;
}
.blog-sidebar .blank-space-sm {
clear: both;
display: block;
width: 100%;
height: 15px;
}
.blog-sidebar .tagcloud a {
border-radius: 5px;
background-color: #f4f4f4;
color: #808080;
margin: 3px;
padding: 7px 15px;
display: inline-block;
font-size: 14px !important;
}
.blog-sidebar .tagcloud a:hover {
background-color: #808080;
color: #f4f4f4;
}
/* Widgets */
div#instagram div {
width: 23%;
display: inline-block;
margin: 1%;
}
img.instagram-image {
width: 100%;
}
div#portfolio-widget div {
width: 47%;
display: inline-block;
margin: 1%;
overflow: hidden;
}
div#portfolio-widget a { width: 100%; }
div.blank-space-sm {
height: 20px;
}
/* TWEAKS */
ul.banner { padding: 0; }
img, video {max-width: 100%; height: auto;}
.single-post ul, .page-template-default ul { padding-left: 50px !important; }
#wpadminbar ul { padding-left: 0 !important; }
.single-sidebar ul { padding-left: 0 !important; }
.w100 { max-width: 100%; height: auto; }
.nopad { padding: 0; }
.sep { width: 50px; height: 50px; }
.cb { clear:both; }
div.wpcf7-validation-errors { border: 0 !important; float: left; margin: 0px }
body.page-template-default > .bx-wrapper ul { padding: 0 !important; }
.services-item .item-body > p { min-height: 50px; }
.price-item .item-body > ul { min-height: 100px; }
.blog-full .sticky{
border: 1px solid #ddd;
padding: 10px;
border-radius: 0px 5px;
}
.title .pull-left h1 {
margin-top: 0;
}
.display-none {
visibility: hidden;
}
a.share-social i.fa-google-plus {
padding: 7px 8px 7px 7px !important;
}
a.share-social i.fa-linkedin {
padding: 7px 8px !important;
}
a.bx-pager-link.active, a.bx-pager-link:hover {
background: url("../img/active.png") no-repeat scroll !important;
display:inline;
outline:none;
}
a.bx-pager-link {
width: 13px !important;
height: 14px !important;
display:inline;
padding:2px;
background: url("../img/inactive.png") no-repeat scroll !important;
position:relative;
outline:none;
}
.services-item hr, .price-item .item-body hr, .features hr {
margin: 20px auto !important;
}
.btn-loading a { display: none; }
.btn-loading {
background: url('../img/loader.gif');
background-repeat: no-repeat;
width: 100%;
height: 50px;
background-position: 50%;
}
.isotope img{
width:100%;
height: auto;
}
div.wpcf7-mail-sent-ok{
border: 0px
}
section.contact-form form br{
display:none;
}
.wpcf7-not-valid-tip{
font-size: 12px!important;
}
.wp-caption-text{
text-decoration: underline;
text-align: center
}
/* Theme check required */
.wp-caption, .wp-caption-text, .gallery-caption, .bypostauthor {}
.sticky { }
.alignright {
text-align: right;
float:right;
margin-left: 15px;
}
.alignleft {
text-align: left;
float: left;
margin-right: 15px;
}
.aligncenter {
text-align: center;
display: block;
margin: 0 auto;
}
.container * { max-width: 100% }
ul.testimonialx, .owl-wrapper, .bx-wrapper * { max-width: none !important }
#pricing ul, .features ul, .missions ul { padding: 0 !important; }
.work .col-md-12.nopad, .blog .col-md-12.nopad { overflow: hidden; }
@media (max-width: 767px){
ul.portfolio-slider li {
background: none !important;
}
ul.portfolio-slider li img {
display: block !important;
visibility: visible !important;
max-width: 100% !important;
}
ul.portfolio-slider li.bx-clone:last-of-type {
display: none;
}
}
/* TRANSITIONS */
.about .overlay,
.about .overlay .social .items a:hover, .about .overlay .social .items a,
.missions-item:hover .icon, .missions-item:hover .icon i,
.missions-item .icon i, .missions-item .icon,
.work .filter a, .work .filter a:hover,
.loadmore a, .loadmore a:hover, .work .isotope .item .hover,
.video .vid, .services-item:hover *, .services-item *,
.price-item:hover *, .price-item *,
.blog .isotope-blog .item .hover,
.contact-form input, .contact-form textarea,
a.share-social i:hover, a.share-social i,
.blog-full .blog-item:hover .overlay, .blog-full .blog-item .overlay:hover
.blog-full .blog-item .overlay, .blog-full .blog-item .overlay,
a.button, a.button:hover,
.footer .social i:hover, .footer .social i
{
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.work .isotope .item .hover .bottom, .work .isotope .item .hover:hover .bottom,
.blog .isotope-blog .item .hover .bottom, .blog .isotope-blog .item .hover:hover .bottom
{
-webkit-transition: all .75s ease;
-moz-transition: all .75s ease;
-ms-transition: all .75s ease;
-o-transition: all .75s ease;
transition: all .75s ease;
}
/* Sarp-Loader */
.sarp-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
z-index: 999999998;
}
.sarp-loader {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
background-color: white;
z-index: 999999999;
}
div.loading9, div.sarp-loader p{
display: none;
}
div.sarp-loader p {
color: #777777;
font-size: 18px;
font-weight: bold;
margin-left: 15px;
margin-top: 5px;
}
div.sarp-loader img {
margin-bottom: 10px;
margin-left: 15px;
}
div.outer {
display: table;
width: 100%;
height: 100%;
position: relative;
}
div.inner {
display: table-cell;
width: 100%;
height: 100%;
position: relative;
vertical-align: middle;
text-align: center;
}
.loading9 i{
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
}
.loading9 i:first-child{
-webkit-animation:loading9-ani2 0.5s linear infinite;
animation:loading9-ani2 0.5s linear infinite;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform:translate(-20px);
transform:translate(-20px);
}
.loading9 i:nth-child(2),
.loading9 i:nth-child(3){
-webkit-animation:loading9-ani3 0.5s linear infinite;
animation:loading9-ani3 0.5s linear infinite;
}
.loading9 i:last-child {
-webkit-animation:loading9-ani1 0.5s linear infinite;
animation:loading9-ani1 0.5s linear infinite;
}
@-webkit-keyframes loading9-ani1{
100%{
-webkit-transform:translate(40px);
transform:translate(40px);
opacity: 0;
filter: alpha(opacity=0);
}
}
@keyframes loading9-ani1{
100%{
-webkit-transform:translate(40px);
transform:translate(40px);
opacity: 0;
filter: alpha(opacity=0);
}
}
@-webkit-keyframes loading9-ani2{
100%{
-webkit-transform:translate(20px);
transform:translate(20px);
opacity: 1;
filter: alpha(opacity=100);
}
}
@keyframes loading9-ani2{
100%{
-webkit-transform:translate(20px);
transform:translate(20px);
opacity: 1;
filter: alpha(opacity=100);
}
}
@-webkit-keyframes loading9-ani3{
100%{
-webkit-transform:translate(20px);
transform:translate(20px);
}
}
@keyframes loading9-ani3{
100%{
-webkit-transform:translate(20px);
transform:translate(20px);
}
}
/* BLACK THEME */
body.sarp_black,
body.sarp_black section,
body.sarp_black .sarp-loader,
body.sarp_black .sarp-wrapper,
body.sarp_black div#respond {
background-color: #1e1e1e;
}
body.sarp_black #menu {
background-color: #151515;
border-color: #2b2b2b;
}
body.sarp_black .bx-viewport {
background-color: #151515;
}
body.sarp_black .testimonial .bx-viewport {
background-color: transparent !important;
}
body.sarp_black #menu ul li.current_page_item a,
body.sarp_black #menu ul li a:hover {
color: white !important;
}
body.sarp_black #menu ul li a {
color: #a0a0a0 !important;
}
body.sarp_black .circles i,
body.sarp_black h1,
body.sarp_black h2,
body.sarp_black h3,
body.sarp_black h4,
body.sarp_black h5,
body.sarp_black h6 {
color: #969696 !important;
}
body.sarp_black section hr.section-hr {
border-color: #969696 !important;
}
body.sarp_black section h2.item-title,
body.sarp_black section p,
body.sarp_black .contact-form i,
body.sarp_black section span {
color: #696969 !important;
}
body.sarp_black .missions-item .icon i,
body.sarp_black .missions-item .desc strong {
color: #696969 !important;
border-color: #696969 !important;
}
body.sarp_black .missions-item:hover .icon,
body.sarp_black .missions-item:hover .icon i,
body.sarp_black .missions-item:hover .desc strong,
body.sarp_black .missions-item:hover .desc ul li {
color: #969696 !important;
border-color: #969696 !important;
}
body.sarp_black .work .filter a,
body.sarp_black .loadmore a,
body.sarp_black a.button,
body.sarp_black p.form-submit input[type=submit] {
border-color: #696969 !important;
color: #696969 !important;
}
body.sarp_black .work .filter a:hover,
body.sarp_black .work .filter a.active,
body.sarp_black .loadmore a:hover,
body.sarp_black a.button:hover,
body.sarp_black p.form-submit input[type=submit]:hover {
border-color: #969696 !important;
color: #969696 !important;
}
body.sarp_black .price .price-item .item-top i,
body.sarp_black .services .services-item .item-top i {
color: #696969;
}
body.sarp_black .services .services-item .item-top,
body.sarp_black .services .services-item .item-body,
body.sarp_black .services .services-item .item-body a,
body.sarp_black .price .price-item .item-top,
body.sarp_black .price .price-item .item-body,
body.sarp_black .price .price-item .item-body a {
color: #696969;
background-color: #1d1d1d !important;
border-color: #373737 !important;
}
body.sarp_black .services .services-item:hover .item-top,
body.sarp_black .services .services-item:hover .item-body,
body.sarp_black .price .price-item:hover .item-top,
body.sarp_black .price .price-item:hover .item-body
{
background-color: #151515 !important;
}
body.sarp_black .services .services-item:hover *,
body.sarp_black .price .price-item:hover *
{
color: #969696 !important;
}
body.sarp_black .footer .social i {
border-color: #1e1e1e;
}
body.sarp_black .footer .social i:hover {
background-color: #2e2e2e;
}
body.sarp_black hr,
div#respond:before,
ul.children:before {
border-color: #333 !important;
}
body.sarp_black span.categories-list a {
color: #666 !important;
}
body.sarp_black a.share-social i {
color: #696969 !important;
border-color: #696969 !important;
}
body.sarp_black a.share-social i:hover {
color: white !important;
}
body { background-position: center top !important; }