Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

scott venaglia
scott venaglia
6,117 Points

having trouble with my margins css

hey guys I am working on a site at the moment I am fairly new to this and I cant seem to get it right i am not sure if its my margin or my image code below is link to what is going wrong and a copy of my CSS I am trying to make it so that the images on the right hand side dont end up getting cut off http://s736.photobucket.com/user/Scott_Venaglia/media/website_zpsm59ahvyg.jpg.html

body{overflow-x:hidden;position:relative;margin:0;padding:0;font-family:'Montserrat',sans-serif;font-weight:400;font-size:13px;line-height:20px;color:#555;background-color:#fff}a,input,select,textarea{vertical-align:top;outline:none !important;-webkit-appearance:none;-webkit-border-radius:0}::-webkit-input-placeholder{opacity:1 !important}:-moz-placeholder{opacity:1 !important}::-moz-placeholder{opacity:1 !important}:-ms-input-placeholder{opacity:1 !important}select:-moz-focusring{ color:transparent;outline:none !important; text-shadow:0 0 0 #000 !important;border:0 !important}textarea{resize:none}img{outline:0;vertical-align:top;border:0;width:100%;max-width:100.1%;height:auto}a{color:#272727;transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}a:hover,a:focus{text-decoration:none;color:#fdf58b}.clear{clear:both;height:0;font-size:0}#page{overflow-x:hidden}section{padding:55px 0}.container{padding-left:30px;padding-right:30px}.margbot0{margin-bottom:0 !important}.margbot5{margin-bottom:5px !important}.margbot10{margin-bottom:10px !important}.margbot20{margin-bottom:20px !important}.margbot25{margin-bottom:25px !important}.margbot30{margin-bottom:30px !important}.margbot40{margin-bottom:40px !important}.margbot50{margin-bottom:50px !important}.margbot55{margin-bottom:55px !important}.margbot60{margin-bottom:60px !important}.margbot65{margin-bottom:65px !important}.margbot70{margin-bottom:70px !important}.margbot75{margin-bottom:75px !important}.margbot80{margin-bottom:80px !important}.margbot95{margin-bottom:95px !important}.margbot120{margin-bottom:120px !important}.pad0{padding:0 !important}.padbot0{padding-bottom:0 !important}.padbot10{padding-bottom:10px !important}.padbot20{padding-bottom:20px !important}.padbot30{padding-bottom:30px !important}.padbot40{padding-bottom:40px !important}.padbot50{padding-bottom:50px !important}.padbot60{padding-bottom:60px !important}.padbot70{padding-bottom:70px !important}.padbot80{padding-bottom:80px !important}.padbot85{padding-bottom:85px !important}.padtop0{padding-top:0 !important}.center{text-align:center}.right{text-align:right}.color_text{color:#fdf58b !important}.btn{display:inline-block;margin:0 3px 5px 0;padding:12px 20px;border:0;border-radius:0;box-shadow:none;text-transform:none;font-weight:400;line-height:20px;font-size:13px;color:#fff;text-shadow:none;border-radius:22px;background:#272727;transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}.btn:focus,.btn:hover{color:#fff;background-color:#fdf58b}.btn-active{color:#272727;background-color:#fdf58b}.btn-active:hover{background:#272727;color:#fff}.btn-white{background-color:#fff;color:#fdf58b}.btn-white:hover{background-color:#fdf58b;color:blue}.btn-lg{padding:12px 50px;font-size:16px}.btn-sm{padding:6px 20px 5px;font-size:12px}.btn-xs{padding:2px 15px 3px;font-size:11px}ul,ol{padding:0;margin:0}li{padding:0;margin:0;list-style:none}p{margin:0 0 20px}h1,h2,h3,h4,h5,h6{margin-top:0;font-family:'Montserrat',sans-serif;text-transform:none;font-weight:400;line-height:1.2;color:#272727}h1{margin:0 0 24px;font-size:50px}h2{margin:0 0 30px;font-size:41px}h3{margin:0 0 21px;font-size:36px}h4{margin:0 0 21px;font-size:28px}h5{margin:0 0 15px;font-size:22px}h6{margin:0 0 15px;font-size:17px}header{position:absolute;z-index:9999;left:0;top:100%;width:100%;padding:19px 0 22px;margin-top:-86px;transition:background 0.3s ease-in-out,padding 0.3s ease-in-out;-webkit-transition:background 0.3s ease-in-out,padding 0.3s ease-in-out}header.menu_fixed{position:fixed;top:0;margin:0;padding:10px 0;background-color:#272727}header .btn{float:right}header .btn:hover{color:#272727;background-color:#fff}.main_menu{float:left;padding:14px 0 11px}.main_menu li{display:inline-block;margin:0 55px 0 0}.main_menu li a{display:block;padding:0;text-transform:uppercase;font-weight:400;color:#fff}.main_menu li a:hover,.main_menu li.active a{color:#fdf58b}#home{position:relative;height:1080px;background-color:#272727}.flexslider.top_slider .slides li{background-repeat:no-repeat;background-size:cover;background-position:center center}.flexslider.top_slider .slides li.slide1{background-image:url(../images/slider/slide1.jpg)}.flexslider.top_slider .slides li.slide2{background-image:url(../images/slider/slide2.jpg)}.flex-direction-nav a{top:auto;bottom:100px}.flexslider.top_slider .flex-direction-nav a.flex-prev{left:50%;margin-left:-35px;background-color:rgba(255,255,255,0.3)}.flexslider.top_slider .flex-direction-nav a.flex-next{right:50%;margin-right:-35px;background-color:rgba(255,255,255,0.3)}.flexslider.top_slider .flex-direction-nav a:hover{background-color:#fdf58b}.flexslider .flex-direction-nav a i{display:block;text-align:center;line-height:29px;font-size:20px;color:#fff;transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}.flexslider .flex-direction-nav a:hover i{color:#272727}.flexslider.top_slider .container{position:relative}.top_slider_cap{position:absolute;left:30px;right:30px;top:50%;text-align:center;transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%)}.top_slider_cap img{width:auto !important;margin-left:auto;margin-right:auto}.top_slider_cap h1{margin:0 0 31px;text-transform:none;font-weight:300;line-height:35px;font-size:42px;color:#fdf58b;text-shadow:1px 1px 1px rgba(0,0,0,0.31)}.top_slider_cap p{margin:0 0 39px;line-height:25px;font-size:20px;color:#fff}.top_slider_cap .slide_btn{display:inline-block;margin:0;padding:18px 70px 17px;font-weight:400;line-height:20px;font-size:16px;color:#272727;border-radius:24px;background-color:#fdf58b}.top_slider_cap .slide_btn:hover{color:#272727;background-color:#fff}#gallery{padding:0}#gallery .gallery_wrap{margin-right:-250px}#gallery .gallery_img{overflow:hidden}.gallery_img.item1{width:32.14%}.gallery_img.item2{width:33.92%}.gallery_img.item3{width:33.92%}.gallery_img.item4{width:42.91%}.gallery_img.item5{width:23.15%}.gallery_img.item6{width:57.08%}.gallery_img.item7{width:21.54%}.gallery_img.item8{width:21.36%}#gallery .gallery_img img{transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out}#gallery .gallery_img:hover img{transform:scale(1.05);-webkit-transform:scale(1.05)}#gallery .gallery_img:before{content:'';position:absolute;z-index:2;left:0;top:100%;width:100%;height:100%;background:-moz-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(125,185,232,0)),color-stop(30%,rgba(253,245,139,0.3)),color-stop(100%,rgba(253,245,139,1)));background:-webkit-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);background:-o-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);background:-ms-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);background:linear-gradient(to bottom,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8',endColorstr='#fdf58b',GradientType=0 );transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out}#gallery .gallery_img:hover:before{top:0}#gallery .gallery_img a{position:absolute;z-index:3;left:0;top:80%;display:block;width:100%;text-transform:uppercase;text-align:center;line-height:28px;font-size:26px;opacity:0;transform:translateY(-50%);-webkit-transform:translateY(-50%)}#gallery .gallery_img:hover a{top:50%;opacity:1}#about{overflow:hidden;position:relative;padding:141px 0 102px}#about .about_img{position:absolute;left:0;top:0;bottom:0;width:55.4%;background-image:url(../images/about_img.jpg);background-repeat:no-repeat;background-size:cover;background-position:center center}#about .about_content{float:right;width:45.5%;padding:0 130px;text-align:center;line-height:25px}#services{padding-top:112px}.countdown{padding-bottom:94px}.countdown span{display:block;margin-bottom:20px;text-align:center;line-height:88px;font-size:103px;color:#fe5252}.countdown p{text-transform:uppercase;text-align:center}.services_content{position:relative;float:left;width:44%}.services_text{position:absolute;left:16%;right:16%;top:50%;text-align:center;transform:translateY(-50%);-webkit-transform:translateY(-50%)}.services_items_wrap{float:right;width:56%}.service_item{position:relative;display:inline-block;width:32.8%;text-align:center;line-height:25px;font-size:14px;color:#c8c8c8;perspective:1600px;-webkit-perspective:1600px}.service_item_front{padding:112px 30px 92px}.color1 .service_item_front{background-color:#272727}.color2 .service_item_front{background-color:#343434}.color3 .service_item_front{background-color:#3f3f3f}.service_item span{position:relative;display:block;margin-bottom:32px;padding-bottom:25px;line-height:54px;font-size:54px}.service_item.color1 span{color:#fdf58b}.service_item.color2 span{color:#dda71c}.service_item.color3 span{color:#fe5252}.service_item span:before{content:'';position:absolute;left:50%;bottom:0;margin-left:-15px;width:30px;height:3px}.service_item.color1 span:before{background-color:#4b4b4b}.service_item.color2 span:before{background-color:#595959}.service_item.color3 span:before{background-color:#656565}.service_item h4{margin-bottom:44px;text-transform:uppercase;line-height:29px;font-size:26px;color:#fff}.service_item .service_item_front{position:relative;z-index:24;transition:all 0.6s ease-in-out;-webkit-transition:all 0.6s ease-in-out}.service_item:hover .service_item_front{z-index:35;transform:rotateY(180deg);-o-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);transition-delay:.2s;-webkit-transition-delay:.2s}.service_item .service_item_back{position:absolute;z-index:13;left:0;top:0;width:100%;height:100%;transform:rotateY(-180deg);-o-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);transition:all 0.6s ease-in-out;-webkit-transition:all 0.6s ease-in-out}.color1 .service_item_back{background-color:#272727}.color2 .service_item_back{background-color:#343434}.color3 .service_item_back{background-color:#3f3f3f}.service_item:hover .service_item_back{z-index:46;transform:rotateY(0deg);-o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-webkit-transform:rotateY(0deg);transition-delay:.2s;-webkit-transition-delay:.2s}.service_item .service_item_back p{position:absolute;left:35px;top:50%;right:35px;transform:translateY(-50%);-webkit-transform:translateY(-50%)}.event_item{overflow:hidden;position:relative;float:left;width:25%}.event_item:before{content:'';position:absolute;z-index:2;left:0;top:100%;width:100%;height:100%;background:-moz-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(125,185,232,0)),color-stop(30%,rgba(253,245,139,0.3)),color-stop(100%,rgba(253,245,139,1)));background:-webkit-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);background:-o-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);background:-ms-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);background:linear-gradient(to bottom,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8',endColorstr='#fdf58b',GradientType=0 );transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out}.event_item:hover:before{top:0}.event_item img{transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out}.event_item:hover img{transform:scale(1.05);-webkit-transform:scale(1.05)}.event_descr{position:absolute;z-index:3;left:30px;right:30px;bottom:-100%;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out}.event_item:hover .event_descr{bottom:0}.event_descr h4{margin-bottom:3px;font-weight:700;line-height:20px;font-size:18px}.event_descr .event_date{display:block;padding-bottom:21px;text-transform:uppercase;font-size:11px;color:#777}#contacts_inf{padding:47px 0 65px}#contacts_inf h4{margin-bottom:18px;line-height:20px;font-size:18px}footer{padding:38px 0 21px;color:#878787;background-color:#272727}footer #copyright{color:#fff}footer #copyright span{color:#fdf58b}

Jeff Lemay
Jeff Lemay
14,268 Points

Formatted:

body {
  overflow-x: hidden;
  position: relative;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat',sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: #555;
  background-color: #fff;
}

a,input,select,textarea {
  vertical-align: top;
  outline: none !important;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

::-webkit-input-placeholder {
  opacity: 1 !important;
}

:-moz-placeholder {
  opacity: 1 !important;
}

::-moz-placeholder {
  opacity: 1 !important;
}

:-ms-input-placeholder {
  opacity: 1 !important;
}

select:-moz-focusring {
  color: transparent;
  outline: none !important;
  text-shadow: 0 0 0 #000 !important;
  border: 0 !important;
}

textarea {
  resize: none;
}

img {
  outline: 0;
  vertical-align: top;
  border: 0;
  width: 100%;
  max-width: 100.1%;
  height: auto;
}

a {
  color: #272727;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

a:hover,a:focus {
  text-decoration: none;
  color: #fdf58b;
}

.clear {
  clear: both;
  height: 0;
  font-size: 0;
}

#page {
  overflow-x: hidden;
}

section {
  padding: 55px 0;
}

.container {
  padding-left: 30px;
  padding-right: 30px;
}

.margbot0 {
  margin-bottom: 0 !important;
}

.margbot5 {
  margin-bottom: 5px !important;
}

.margbot10 {
  margin-bottom: 10px !important;
}

.margbot20 {
  margin-bottom: 20px !important;
}

.margbot25 {
  margin-bottom: 25px !important;
}

.margbot30 {
  margin-bottom: 30px !important;
}

.margbot40 {
  margin-bottom: 40px !important;
}

.margbot50 {
  margin-bottom: 50px !important;
}

.margbot55 {
  margin-bottom: 55px !important;
}

.margbot60 {
  margin-bottom: 60px !important;
}

.margbot65 {
  margin-bottom: 65px !important;
}

.margbot70 {
  margin-bottom: 70px !important;
}

.margbot75 {
  margin-bottom: 75px !important;
}

.margbot80 {
  margin-bottom: 80px !important;
}

.margbot95 {
  margin-bottom: 95px !important;
}

.margbot120 {
  margin-bottom: 120px !important;
}

.pad0 {
  padding: 0 !important;
}

.padbot0 {
  padding-bottom: 0 !important;
}

.padbot10 {
  padding-bottom: 10px !important;
}

.padbot20 {
  padding-bottom: 20px !important;
}

.padbot30 {
  padding-bottom: 30px !important;
}

.padbot40 {
  padding-bottom: 40px !important;
}

.padbot50 {
  padding-bottom: 50px !important;
}

.padbot60 {
  padding-bottom: 60px !important;
}

.padbot70 {
  padding-bottom: 70px !important;
}

.padbot80 {
  padding-bottom: 80px !important;
}

.padbot85 {
  padding-bottom: 85px !important;
}

.padtop0 {
  padding-top: 0 !important;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.color_text {
  color: #fdf58b !important;
}

.btn {
  display: inline-block;
  margin: 0 3px 5px 0;
  padding: 12px 20px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  font-weight: 400;
  line-height: 20px;
  font-size: 13px;
  color: #fff;
  text-shadow: none;
  border-radius: 22px;
  background: #272727;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.btn:focus,.btn:hover {
  color: #fff;
  background-color: #fdf58b;
}

.btn-active {
  color: #272727;
  background-color: #fdf58b;
}

.btn-active:hover {
  background: #272727;
  color: #fff;
}

.btn-white {
  background-color: #fff;
  color: #fdf58b;
}

.btn-white:hover {
  background-color: #fdf58b;
  color: blue;
}

.btn-lg {
  padding: 12px 50px;
  font-size: 16px;
}

.btn-sm {
  padding: 6px 20px 5px;
  font-size: 12px;
}

.btn-xs {
  padding: 2px 15px 3px;
  font-size: 11px;
}

ul,ol {
  padding: 0;
  margin: 0;
}

li {
  padding: 0;
  margin: 0;
  list-style: none;
}

p {
  margin: 0 0 20px;
}

h1,h2,h3,h4,h5,h6 {
  margin-top: 0;
  font-family: 'Montserrat',sans-serif;
  text-transform: none;
  font-weight: 400;
  line-height: 1.2;
  color: #272727;
}

h1 {
  margin: 0 0 24px;
  font-size: 50px;
}

h2 {
  margin: 0 0 30px;
  font-size: 41px;
}

h3 {
  margin: 0 0 21px;
  font-size: 36px;
}

h4 {
  margin: 0 0 21px;
  font-size: 28px;
}

h5 {
  margin: 0 0 15px;
  font-size: 22px;
}

h6 {
  margin: 0 0 15px;
  font-size: 17px;
}

header {
  position: absolute;
  z-index: 9999;
  left: 0;
  top: 100%;
  width: 100%;
  padding: 19px 0 22px;
  margin-top: -86px;
  transition: background 0.3s ease-in-out,padding 0.3s ease-in-out;
  -webkit-transition: background 0.3s ease-in-out,padding 0.3s ease-in-out;
}

header.menu_fixed {
  position: fixed;
  top: 0;
  margin: 0;
  padding: 10px 0;
  background-color: #272727;
}

header .btn {
  float: right;
}

header .btn:hover {
  color: #272727;
  background-color: #fff;
}

.main_menu {
  float: left;
  padding: 14px 0 11px;
}

.main_menu li {
  display: inline-block;
  margin: 0 55px 0 0;
}

.main_menu li a {
  display: block;
  padding: 0;
  text-transform: uppercase;
  font-weight: 400;
  color: #fff;
}

.main_menu li a:hover,.main_menu li.active a {
  color: #fdf58b;
}

#home {
  position: relative;
  height: 1080px;
  background-color: #272727;
}

.flexslider.top_slider .slides li {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.flexslider.top_slider .slides li.slide1 {
  background-image: url(../images/slider/slide1.jpg);
}

.flexslider.top_slider .slides li.slide2 {
  background-image: url(../images/slider/slide2.jpg);
}

.flex-direction-nav a {
  top: auto;
  bottom: 100px;
}

.flexslider.top_slider .flex-direction-nav a.flex-prev {
  left: 50%;
  margin-left: -35px;
  background-color: rgba(255,255,255,0.3);
}

.flexslider.top_slider .flex-direction-nav a.flex-next {
  right: 50%;
  margin-right: -35px;
  background-color: rgba(255,255,255,0.3);
}

.flexslider.top_slider .flex-direction-nav a:hover {
  background-color: #fdf58b;
}

.flexslider .flex-direction-nav a i {
  display: block;
  text-align: center;
  line-height: 29px;
  font-size: 20px;
  color: #fff;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.flexslider .flex-direction-nav a:hover i {
  color: #272727;
}

.flexslider.top_slider .container {
  position: relative;
}

.top_slider_cap {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.top_slider_cap img {
  width: auto !important;
  margin-left: auto;
  margin-right: auto;
}

.top_slider_cap h1 {
  margin: 0 0 31px;
  text-transform: none;
  font-weight: 300;
  line-height: 35px;
  font-size: 42px;
  color: #fdf58b;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.31);
}

.top_slider_cap p {
  margin: 0 0 39px;
  line-height: 25px;
  font-size: 20px;
  color: #fff;
}

.top_slider_cap .slide_btn {
  display: inline-block;
  margin: 0;
  padding: 18px 70px 17px;
  font-weight: 400;
  line-height: 20px;
  font-size: 16px;
  color: #272727;
  border-radius: 24px;
  background-color: #fdf58b;
}

.top_slider_cap .slide_btn:hover {
  color: #272727;
  background-color: #fff;
}

#gallery {
  padding: 0;
}

#gallery .gallery_wrap {
  margin-right: -250px;
}

#gallery .gallery_img {
  overflow: hidden;
}

.gallery_img.item1 {
  width: 32.14%;
}

.gallery_img.item2 {
  width: 33.92%;
}

.gallery_img.item3 {
  width: 33.92%;
}

.gallery_img.item4 {
  width: 42.91%;
}

.gallery_img.item5 {
  width: 23.15%;
}

.gallery_img.item6 {
  width: 57.08%;
}

.gallery_img.item7 {
  width: 21.54%;
}

.gallery_img.item8 {
  width: 21.36%;
}

#gallery .gallery_img img {
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

#gallery .gallery_img:hover img {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
}

#gallery .gallery_img:before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(125,185,232,0)),color-stop(30%,rgba(253,245,139,0.3)),color-stop(100%,rgba(253,245,139,1)));
  background: -webkit-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);
  background: -o-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);
  background: -ms-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);
  background: linear-gradient(to bottom,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8',endColorstr='#fdf58b',GradientType=0 );
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

#gallery .gallery_img:hover:before {
  top: 0;
}

#gallery .gallery_img a {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 80%;
  display: block;
  width: 100%;
  text-transform: uppercase;
  text-align: center;
  line-height: 28px;
  font-size: 26px;
  opacity: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

#gallery .gallery_img:hover a {
  top: 50%;
  opacity: 1;
}

#about {
  overflow: hidden;
  position: relative;
  padding: 141px 0 102px;
}

#about .about_img {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 55.4%;
  background-image: url(../images/about_img.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

#about .about_content {
  float: right;
  width: 45.5%;
  padding: 0 130px;
  text-align: center;
  line-height: 25px;
}

#services {
  padding-top: 112px;
}

.countdown {
  padding-bottom: 94px;
}

.countdown span {
  display: block;
  margin-bottom: 20px;
  text-align: center;
  line-height: 88px;
  font-size: 103px;
  color: #fe5252;
}

.countdown p {
  text-transform: uppercase;
  text-align: center;
}

.services_content {
  position: relative;
  float: left;
  width: 44%;
}

.services_text {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.services_items_wrap {
  float: right;
  width: 56%;
}

.service_item {
  position: relative;
  display: inline-block;
  width: 32.8%;
  text-align: center;
  line-height: 25px;
  font-size: 14px;
  color: #c8c8c8;
  perspective: 1600px;
  -webkit-perspective: 1600px;
}

.service_item_front {
  padding: 112px 30px 92px;
}

.color1 .service_item_front {
  background-color: #272727;
}

.color2 .service_item_front {
  background-color: #343434;
}

.color3 .service_item_front {
  background-color: #3f3f3f;
}

.service_item span {
  position: relative;
  display: block;
  margin-bottom: 32px;
  padding-bottom: 25px;
  line-height: 54px;
  font-size: 54px;
}

.service_item.color1 span {
  color: #fdf58b;
}

.service_item.color2 span {
  color: #dda71c;
}

.service_item.color3 span {
  color: #fe5252;
}

.service_item span:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -15px;
  width: 30px;
  height: 3px;
}

.service_item.color1 span:before {
  background-color: #4b4b4b;
}

.service_item.color2 span:before {
  background-color: #595959;
}

.service_item.color3 span:before {
  background-color: #656565;
}

.service_item h4 {
  margin-bottom: 44px;
  text-transform: uppercase;
  line-height: 29px;
  font-size: 26px;
  color: #fff;
}

.service_item .service_item_front {
  position: relative;
  z-index: 24;
  transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}

.service_item:hover .service_item_front {
  z-index: 35;
  transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transition-delay: .2s;
  -webkit-transition-delay: .2s;
}

.service_item .service_item_back {
  position: absolute;
  z-index: 13;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}

.color1 .service_item_back {
  background-color: #272727;
}

.color2 .service_item_back {
  background-color: #343434;
}

.color3 .service_item_back {
  background-color: #3f3f3f;
}

.service_item:hover .service_item_back {
  z-index: 46;
  transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transition-delay: .2s;
  -webkit-transition-delay: .2s;
}

.service_item .service_item_back p {
  position: absolute;
  left: 35px;
  top: 50%;
  right: 35px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.event_item {
  overflow: hidden;
  position: relative;
  float: left;
  width: 25%;
}

.event_item:before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(125,185,232,0)),color-stop(30%,rgba(253,245,139,0.3)),color-stop(100%,rgba(253,245,139,1)));
  background: -webkit-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);
  background: -o-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);
  background: -ms-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);
  background: linear-gradient(to bottom,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8',endColorstr='#fdf58b',GradientType=0 );
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

.event_item:hover:before {
  top: 0;
}

.event_item img {
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

.event_item:hover img {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
}

.event_descr {
  position: absolute;
  z-index: 3;
  left: 30px;
  right: 30px;
  bottom: -100%;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

.event_item:hover .event_descr {
  bottom: 0;
}

.event_descr h4 {
  margin-bottom: 3px;
  font-weight: 700;
  line-height: 20px;
  font-size: 18px;
}

.event_descr .event_date {
  display: block;
  padding-bottom: 21px;
  text-transform: uppercase;
  font-size: 11px;
  color: #777;
}

#contacts_inf {
  padding: 47px 0 65px;
}

#contacts_inf h4 {
  margin-bottom: 18px;
  line-height: 20px;
  font-size: 18px;
}

footer {
  padding: 38px 0 21px;
  color: #878787;
  background-color: #272727;
}

footer #copyright {
  color: #fff;
}

footer #copyright span {
  color: #fdf58b;
}

1 Answer

scott venaglia
scott venaglia
6,117 Points

Jeff Lemay thanks heaps for doing that Jeff for doing that did you do that formatting yourself or did you use a program or site ?