/*

Theme Name: 	Gridi OnePage

Theme URI:    http://www.danieleinnocenti.net/demo/gridi-onepage/

Description: 	Responsive Html Theme based on Boostrap and Font Awesome.

Version:     	1.0.0

Author:     	Daniele Innocenti

Tags:        	responsive-layout,custom-menu, featured-images, fluid-layout, full-width-template, home-sidebar, right-sidebar, theme-options

License:    	GNU General Public License v3.0

License URI:	http://www.gnu.org/licenses/gpl-3.0.html



Copyright (c) 2018 Daniele Innocenti

http://www.danieleinnocenti.net



Gridi OnePage is free to use for personal and commercial projects.

You can NOT redistribute Gridi OnePage theme or parts from it.

Attribution is not required, but much appreciated.

*/





/*Start arrow animation*/

@-webkit-keyframes alternate {

  0%   {bottom: -50px;}

  50%  {bottom: -60px;}

  100% {bottom: -50px;}

}



@keyframes alternate {

  0%   {bottom: -50px;}

  50%  {bottom: -60px;}

  100% {bottom: -50px;}

}

/*End arrow animation*/



/*Useful classes*/

.overlay {top: 0px;bottom: 0px;left: 0px;right: 0px;position: absolute;opacity: 0.4;background-color: #000000;z-index: 3;}

.section-name {font-weight: lighter;color: #000000;text-transform: uppercase;text-align: center;padding: 2%;}

.section-name::after {content: "";display: block;height: 1px;background-color: #8c8c8c;width: 100px;margin: 1% auto;}

.section-name h2 {font-size: 40px;}

.lead {text-align: center;color: #8c8c8c;font-size:16px;margin-bottom:60px;}

.square-box {position: relative;overflow: hidden;}

.square-box:before {content:"";display: block;padding-top: 100%;}

.square-content {position: absolute;top: 5px;left: 5px;bottom: 5px;right: 5px;color:  #000000;background-color: #FFFFFF;}

.square-content div.content-box {display: table;width: 100%;height: 100%;}

.square-content div.content-box div {display: table-cell;text-align: center;vertical-align: middle;color: #000000;font-weight: lighter;text-transform: capitalize;padding: 1em;overflow: hidden;}

.parallax {background-repeat: no-repeat;background-attachment: fixed;background-position: 50% 0;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

.not-visible{opacity: 0;}

.visible{opacity: 1 !important;}



html, body {height: 100%;font-family: 'Open Sans', sans-serif;}

a {font-weight: bold; color:#8c8c8c;}

a:hover,a:focus {font-weight: bold; color:#8c8c8c;}

img {max-width: 100%;}



/*Start header style*/

header nav.shadow {-webkit-box-shadow: 0px 9px 23px 0px rgba(0,0,0,0.75);-moz-box-shadow: 0px 9px 23px 0px rgba(0,0,0,0.75);box-shadow: 0px 9px 23px 0px rgba(0,0,0,0.75);}

header nav.navbar-fixed-top {transition: 0.6s all ease-in-out;top: -100px;}

header nav.navbar-inverse {background-color: rgba(34,34,34,0.8);}

header nav.navbar .navbar-brand {color: #FFFFFF;}

header nav.navbar .navbar-brand img {max-width: 20px;max-height: 20px;width: auto;display: inline-block;vertical-align:bottom;margin-right: 6px;}

header nav.navbar #navigation li a {padding-bottom: 13px;transition: 0.3s all ease-in-out;}

header nav.navbar #navigation li {border-bottom:2px solid transparent;}

header nav.navbar #navigation li.active  {border-bottom:2px solid #FFFFFF;}

section {background-color: #FFFFFF;overflow-x: hidden;}

/*End header style*/



/*Start section #home style*/

#home {height: 100%;padding-top: 50px;overflow: hidden;background-color: #FFFFFF;background-image: url('../img/portfolio-cover.jpg');position: relative;z-index: 2;}

#home .container-caption {z-index: 4;position: relative;display: table;width: 100%;height: 100%;}

#home .container-caption .caption {color: #FFFFFF;text-align: center;display: table-cell;vertical-align: middle;position: relative;letter-spacing: 3px;text-transform: uppercase;}

#home .container-caption .caption .title {font-size: 60px;font-weight: 700;}

#home .container-caption .caption .description {font-size: 30px;font-weight: lighter;}

#home .container-caption .caption ul.social {letter-spacing: 0px;margin-top: 40px;margin-left: 0px;margin-bottom: 0px;}

#home .container-caption .caption ul.social li.list-item a {color: #FFFFFF;font-size: 25px;background-color:#000000;background-color: rgba(0, 0, 0, 0.5);width: 40px;height: 40px;display: inline-block;border-radius: 20px;transition: ease 0.6s background-color;}

#home .container-caption .caption ul.social li.list-item a i {vertical-align: middle;}

#home .container-caption .caption ul.social li.list-item a:hover,#home .container-caption .caption ul.social li.list-item a:focus {background-color:#000000;background-color: rgba(0, 0, 0, 1);}

#home .container-caption .arrow-down {position: relative;display: inline-block;bottom: -50px;text-align: center;font-size: 52px;-webkit-animation-name: alternate;-webkit-animation-duration: 1s;-webkit-animation-iteration-count: infinite;animation-name: alternate;animation-duration: 1s;animation-iteration-count: infinite;}

#home .container-caption .arrow-down a {color: #FFFFFF;}

/*End section #home style*/



#about,#services,#portfolio,#brand,#features,#contact {background-color: #FFFFFF;padding-top: 50px;padding-bottom: 150px;position: relative;z-index: 2;}



/*Start section #about style*/

#about .content-box {padding: 6%;}

#about .staff-info {text-align: center;}

#about .staff-info img {max-width: 100%;height: auto;}

#about .staff-info h3 {font-weight: 700;}

#about .staff-info button.show-info {margin:20px auto 10px auto;transition: 0.3s all ease-in-out;}

#about .staff-info p {padding: 10px 5px;}

#about .staff-info span {font-style: italic;color: #8c8c8c;}

#about .staff-info ul.social {letter-spacing: 0px;margin-top: 0px;margin-left: 0px;margin-bottom: 0px;}

#about .staff-info ul.social li.list-item a {color: #FFFFFF;font-size: 18px;background-color:#000000;background-color: rgba(0, 0, 0, 0.5);width: 30px;height: 30px;display: inline-block;border-radius: 15px;transition: ease 0.6s background-color;}

#about .staff-info ul.social li.list-item a i {vertical-align: middle;}

#about .staff-info ul.social li.list-item a:hover,#about .staff-info ul.social li.list-item a:focus {background-color:#000000;background-color: rgba(0, 0, 0, 1);}

#info {padding-top: 100px;}

#about #timeLine h3,#about #choose h3,#about #skills h3 {text-align: left;padding-bottom: 40px;text-transform: uppercase;font-weight: 700;}

#about #timeLine h3 i:after,#about #choose h3 i:after,#about #skills h3 i:after{content: "";display: block; width: 40px;}

#about #timeLine ul {padding:0px;list-style-type: none;position:relative;}

#about #timeLine ul:before {content:"";width:1px;background-color: #000000;display:block;position:absolute;top: 0%;left: 0%;bottom:0%; margin-right: -0.5px;}

#about #timeLine ul li {width:80%;padding:0% 0% 5% 0%;margin:0%;position:relative;color:#8c8c8c;}

#about #timeLine ul li h4 {padding-top: 0px;margin-top:0px;text-transform: uppercase;font-weight: 700;color: #8c8c8c;}

#about #timeLine ul li span.date {font-weight: 700;color: #8c8c8c;}

#about #timeLine ul li p {padding-top:5%;position:relative;z-index: 2;}

#about #timeLine ul li i {position: absolute;z-index: 1;top :0%;left: 0%;font-size: 50px;color: #8c8c8c;opacity: 0.2;}

#about #timeLine ul li {text-align: left;padding-left: 40px;}

#about #timeLine ul li:before {content: "";display:block;width: 40px;height: 1px;background-color: #000000;position: absolute;top: 60px;left: 0px;}

#about #choose p {color: #8c8c8c;}

#about #skills {padding-top: 30px;}

#about #skills .skill-container p {text-transform: capitalize;}

#about #skills .progress {height:10px;}

#about #skills .progress-bar {background-color: #000000;}

/*End section #about style*/



/*Start section #cta style*/

#ctaPortfolio {background-image: url('../img/cta-background.jpg');}

#ctaContact {background-image: url('../img/cta2-background.jpg');}

.cta {padding: 10% 0;text-align: center;color: #FFFFFF;background-color: #F9F9F9;position: relative;z-index: 2;}

.cta .overlay {opacity: 0.2;}

.cta .container {position: relative;z-index: 4;}

.cta h2 {font-weight: 700;font-size: 50px;margin: 0px;letter-spacing: 3px; text-transform: uppercase;}

.cta a.action {display: inline-block;padding: 15px 30px;border-radius: 8px;border:3px solid #000000;margin-top:40px;color: #000000;background-color: rgba(255, 255, 255, 0.7);font-weight: 700;text-decoration: none;text-transform: uppercase;transition: 0.3s all ease-in-out;}

.cta a.action:hover {background-color: rgba(255, 255, 255, 0.9);}

/*End section #cta style*/



/*Start section brand and carousel*/

#brand {color: #000000;background-color: #FFFFFF;border-bottom: 1px solid #000000;border-top: 1px solid #000000;}

#brand #brandCarousel {margin-top: 50px;}

#brand #brandCarousel img {opacity: 0.5;transition: all 0.3s ease-in-out;}

#brand #brandCarousel img:hover {opacity: 1;}

#brand #brandCarousel a {opacity: 0.5;transition: all 0.3s ease-in-out;}

#brand #brandCarousel a:hover {opacity: 1;}

#brand #brandCarousel .owl-prev, #brand #brandCarousel .owl-next {transition: all 0.3s ease-in-out;background-color: transparent;border:1px solid #8c8c8c;color:#8c8c8c;width: 40px;height: 40px;padding: 0px;text-align: center;line-height: 36px;font-size: 20px;}

#brand #brandCarousel .owl-prev:hover, #brand #brandCarousel .owl-next:hover {background-color: rgba(34,34,34,0.2);color: rgb(34,34,34);}

/*End section brand and carousel*/



/*Start section #portfolio style*/

#portfolio .content-box img {width: 100%;height: 100%;text-align: center;}

#portfolio .square-content {top: 0px;left: 0px;right: 0px;bottom: 0px;}

#portfolio .square-content div.content-box div {padding: 0px;}

#portfolio .square-content div.content-box div.project-info {transition: 0.3s all ease-in-out; position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 999;display: table;background-color: #000000;width: 100%;height: 100%;opacity: 0;}

#portfolio .square-content div.content-box div.project-info div {display: table-cell;vertical-align: middle;text-align: center;color: #FFFFFF;}

#portfolio .square-content div.content-box div.project-info div h3 {margin: 0px;font-weight: lighter;font-size: 40px;color: #FFFFFF;text-transform: capitalize;}

#portfolio .square-content div.content-box div.project-info div h3::after {content: "";display: block;width: 60px;height: 2px;background-color:#FFFFFF;margin: 20px auto;}

#portfolio .square-content div.content-box div.project-info .category-project {font-style: italic;font-size: 20px;}

#portfolio .square-box {padding: 0px;display: none;}

#portfolio .square-content div.content-box div.project-info:hover {text-decoration: none;opacity: 0.7;cursor: pointer;}

#portfolio .load-container {padding-top: 30px;padding-bottom: 30px;text-align: center;}

#portfolio .load-container #loadMore {display: inline-block;padding: 15px 30px;border-radius: 8px;border:3px solid #000000;color: #000000;background-color: rgba(255, 255, 255, 0.7);font-weight: 700;text-decoration: none;text-transform: uppercase;transition: 0.3s all ease-in-out;}

/*End section #portfolio style*/



/*Modal fullscreen*/

.body-overflow {overflow: hidden;}

.modal-container {display: none;position: fixed;top: 0px;bottom: 0px;left: 0px;right: 0px;overflow-x: hidden;overflow-y: auto;z-index: 9999;}

.modal-dialog {width: 100%;height: 100%;margin: 0px !important;padding: 0px !important;}

.modal {margin: 0px !important;padding: 0px !important;}

.modal-content {height: auto;min-height: 100%;border-radius: 0;}

.modal-content .carousel.slide {max-width: 700px;}

.modal-body .page-header {margin-top: 10px;text-transform: capitalize;}

.modal-body .page-header small {font-style: italic;}

.modal-body h3 {margin-bottom: 25px;}

.modal-body p {color: #8c8c8c;}

.modal-body ul li {color: #8c8c8c;text-transform: capitalize;list-style: none;margin-top:10px;}

.modal-body ul li i:after {content: "";display: block;width: 30px;}

.modal-body .related {padding-top: 40px;}

.modal-body .portfolio-item {margin-bottom: 30px;}

.modal-footer a {transition: 0.3s all ease-in-out;text-transform: capitalize;}

.modal-footer a:hover {font-weight: normal;}

.modal-footer .pre {float:left;}

.modal-footer .next {float:right;}



/*Start section #services style*/

#services .square-box {transition: 0.4s all ease-in-out;}

#services .square-box:hover {z-index: 5;-webkit-box-shadow: 0px 0px 74px -20px rgba(0,0,0,0.86);-moz-box-shadow: 0px 0px 74px -20px rgba(0,0,0,0.86);box-shadow: 0px 0px 74px -20px rgba(0,0,0,0.86);}

#services .square-content {padding: 3%;}

#services .content-box {border: 1px solid #000000;}

#services .square-content div.content-box div i {font-size: 60px;}

#services .square-content div.content-box div p {font-size: 13px;color:#8c8c8c;}

/*End section #services style*/



/*Start section #facts style*/

#facts{text-align: center;padding:10% 0;background-color:#222222;overflow: hidden;}

#facts div.fact-container div {padding: 20% 0%;border: 1px solid #EFEFEF;color:#EFEFEF;}

#facts div.fact-container div i {font-size:70px; opacity: 0.5;}

#facts div.fact-container div span {color:#FFFFFF; font-weight: 700;font-size:40px;display: block;}

#facts div.fact-container div p {color:#FFFFFF; font-weight: 300;font-size:12px;text-transform: uppercase;letter-spacing: 2px;}

/*End section #facts style*/



/*Start section #features style*/

#features img {max-width: 100%;text-align: center;}

#features h4 {font-weight: 700;text-transform: uppercase;}

#features .features-list-right {text-align: left;padding-left: 30px;}

#features .features-list-left {text-align: right;padding-right: 30px;}

#features ul {list-style: none;letter-spacing: 1px;padding-left: 0px;}

#features li {font-size: 10px;margin-top:30px;text-transform: uppercase;}

#features i {font-size: 25px;vertical-align: middle;}

#features i:after {content: "";display: block;width: 40px;}

/*End section #features style*/



/*Start section #contact style*/

#contact {text-align: center;}

#contact .lead p {width: 80%;margin:0 auto;}

#contact .contact-container {position: relative;padding: 0px;}

#contact .contact-container #form-container,#contact .contact-container #info-container {position: absolute;width: 100%;height: 100%;bottom: 0px;left: 0px;z-index: 3;padding: 0px;}

#contact .contact-container #info-container {color: #FFFFFF;}

#contact .contact-container #info-container ul {margin:0px;display: table;width: 100%;margin: 0 auto;padding: 0px;height: 100%;}

#contact .contact-container #info-container ul li {display: table-cell;vertical-align: middle;text-align: center;width: 33.33%;}

#contact .contact-container #info-container ul li i {font-size: 50px;display: block;}

#contact .contact-container #info-container ul li i::after {content:"";display: block;height: 20px;width: 100%;opacity: 0;}

#contact .contact-container #form-container .form-overlay,#contact .contact-container #info-container .form-overlay {background-color: #000000;background-color: rgba(0,0,0,0.8);width: 100%;height: 100%;padding-top: 25px;padding-bottom: 25px;}

#contact .contact-container #form-container .form-overlay form {width: 30%;margin-left: auto;margin-right: auto;margin-top: 20px;}

#contact .contact-container #form-container .form-overlay form input,#contact .contact-container #form-container .form-overlay form textarea {background-color: transparent;color:#FFFFFF;font-weight: bolder;border: none;border-bottom: 3px solid #FFFFFF;}

#contact .contact-container #form-container .form-overlay form textarea {border: 3px solid #FFFFFF;resize: none;}

#contact .contact-container #form-container .form-overlay form .contact-btn {background-color: #FFFFFF;border: 4px solid #000000;color: #000000;}

#contact .contact-container #map-container {z-index: 2;position: relative;padding: 0px;}

#contact .contact-container #map-container iframe {width: 100% !important;height: 500px !important;}

#contact .contact-menu {z-index: 10;position: relative;top: -40px;display: inline-block;margin-left: 0px;}

#contact .contact-menu li {width: 80px;height: 80px;border-radius: 40px;border: 3px solid #000000;font-size: 30px;background-color: #FFFFFF;line-height: 70px;}

#contact .contact-menu li:hover {cursor: pointer;}

#contact .form-control:focus {border-color: #FFFFFF;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 255, 255, 0.6);outline: 0 none;}

/*End section #contact style*/



.transparent {background-color: transparent;opacity: 0;margin-bottom: 200px; height: 1px;}



/*Start footer style*/

#mainFooter {background-color: #222222;position: fixed;bottom: 0px;width: 100%;z-index: -1; height: 200px;padding-top: 40px;}

#mainFooter.index {z-index: 0;}

#topFooter, #bottomFooter {padding-top: 30px;padding-bottom: 0px;}

#mainFooter #topFooter{text-align: center; text-transform: uppercase;color:#8c8c8c;text-transform: capitalize;font-weight: bold;}

#mainFooter #topFooter ul.social {letter-spacing: 0px;margin-top: 0px;margin-left: 0px;margin-bottom: 0px;text-align: center;}

#mainFooter #topFooter ul.social li.list-item a {color: #000000;font-size: 18px;background-color:#FFFFFF;opacity: 0.7;width: 30px;height: 30px;display: inline-block;border-radius: 15px;transition: ease 0.6s all;}

#mainFooter #topFooter ul.social li.list-item a i {vertical-align: middle;}

#mainFooter #topFooter ul.social li.list-item a:hover,#about .staff-info ul.social li.list-item a:focus {opacity: 1;}

#mainFooter #bottomFooter {color: #FFFFFF; padding-bottom:0px;}

/*End footer style*/



@media (max-width: 992px) {

  #home .container-caption .caption .title {font-size: 50px;}

  #home .container-caption .caption .description {font-size: 30px;}

  /* #home .container-caption .caption ul.social {display: none;} */

  .lead {font-size:18px;}

  .section-name h2 {font-size: 40px;}

  .cta h2 {font-size: 30px;}

  #portfolio .square-content div.content-box div.project-info{opacity: 0.7;}

  #contact .contact-container #info-container ul {width: 100%; text-align: center;display: block;}

  #contact .contact-container #info-container ul li {display: block; width: 100%; margin-top: 40px;}

  #contact .contact-container #info-container ul li i {font-size: 30px}

  #contact .contact-container #form-container .form-overlay form {width: 95%;}

  #contact .contact-menu li {border-radius: 30px;font-size: 20px;height: 60px;line-height: 53px;width: 60px;}

  #topFooter {padding-top: 0px;}

  #topFooter p, #bottomFooter p {text-align: center !important; font-size: 10px;}

}



@media (max-width: 254px) {

  #services .square-content div.content-box div i {font-size: 40px;}

  #services .square-content div.content-box div h3 {font-size: 20px;}

  #mainFooter #topFooter ul.social li.list-item a {font-size: 15px;height: 25px;opacity: 0.7;transition: all 0.6s ease 0s;width: 25px;}

}



@media (max-height: 580px) {

  #home .container-caption .caption .title {font-size: 30px;}

  #home .container-caption .caption .description {font-size: 20px;}



}



@media (max-height: 420px) {

  /* #home .container-caption .caption ul.social {display: none;} */

}



.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
}