/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

@import url('https://fonts.googleapis.com/css2?family=Roboto:italic,wght@0,400;0,700;1,100&display=swap');

#wrapper {
    opacity: 0;
}

#preloader {
  position: fixed;
  width: 64px;
  height: 64px;
  left: 50%;
}

/* main */

body {
  /*padding-top: 3rem;
  padding-bottom: 3rem;*/
  color: #00413F;
  font-family: 'Roboto', sans-serif;
  min-width: 320px;
}

html {
  min-width: 320px;
}

a {
  color: #00413F;
}

a:hover {
    color: #007078;
}

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

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


.bottom__cookie-block {
    width: 100%;
    background-color: #00413F;
	color: white;
    display: none;
    position: fixed;
    bottom: 0;
    z-index: 1000;
    text-align: center;
    -webkit-transform: translateZ(0);
	padding: 1rem;
	transition: 1s;
}

.bottom__cookie-block a {
	color: white;
	font-weight: bold;
}

.bottom__cookie-block p {
	margin-bottom: 0;
}

/* CUSTOMIZE THE HEADERSLIDE
-------------------------------------------------- */

.bg-header {
	background-position: center;
	background-size: cover;
	background-color: #007078;
	background-image: url(../img/bg-header.jpg);
	background-repeat: no-repeat;
	min-height: 30rem;
    color: white;
 }

.bg-caption {
  	margin: auto;
    max-width: 42rem;
    z-index: 10;
    padding: 6rem 1rem 4rem;
}

.bg-caption h1 { 
	font-size: 2rem;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 2rem;
}

.bg-caption p {
  margin: auto;
}

.bg-caption p a {
  color: white;
  text-decoration:underline;
}

.bg-caption p a:hover {
  text-decoration:none;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
#myCarousel .carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
#myCarousel .carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

#myCarousel .carousel-caption p {
  max-width: 40rem;
  margin: auto;
}

#myCarousel .carousel-caption h1 { 
	font-size: 2rem;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 2rem;
}

/* Declare heights because of positioning of img element */
#myCarousel .carousel-item {
  height: 32rem;
  background-color: #777;
}
#myCarousel .carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}

#myCarousel .carousel-item {
    background-size: cover;
	background-position: center;
}

#myCarousel .carousel-item.bg1 {
	background-image: url(../img/bg1.jpg) !important;
 }

#myCarousel .carousel-item.bg2 {
	background-image: url(../img/bg2.jpg) !important;
}

#myCarousel .carousel-item.bg3 {
	background-image: url(../img/bg3.jpg) !important;
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 3rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}

.featurette h3 {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.5;
}

.row.urozhai {
    padding: 0 2rem 1rem;
}

.urozhai1 {
	margin-right: 1rem;
	background: url(../img/1_urozhai.png) no-repeat;
}

.zabol2 {
	margin-right: 1rem;
	background: url(../img/2_zabol.png) no-repeat;
}

.belok3 {
	margin-right: 1rem;
	background: url(../img/3_belok.png) no-repeat;
}





/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .featurette-heading {
    margin-top: 7rem;
  }
   
  .bg-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.2rem;
    line-height: 1.6;
  }
  
  .bg-caption h1 {
    font-size: 3.8rem;
    line-height: 1.1;
  }
	
  .bg-caption {
    bottom: 6rem !important;
  }

  .featurette-heading {
    font-size: 50px;
  }
  
  #bottom .jumbotron {
    margin-top: 3rem;
    margin-bottom: 3rem;
    /* padding-left: 23rem; */
  }
	

  .navbar-brand {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: unset !important;
    text-align: left !important;
	margin-bottom: 0 !important;
  }
	
  .envelope {
    margin-right: 0 !important;
	}
	
  #catalog {
	margin-top: 6rem !important;
  }
	
  .featurette h3 {
    margin-top: 4rem !important;
  }
	
  ul.semena {
    padding-right: 0 !important;
	padding-left: 0 !important;
  }
	
  .featurette-divider {
    margin: 5rem 0 !important;
  }
	
  img.bg1 {
	display: block !important;
  }
	
  .row.urozhai {
    padding: 0!important;
  }
	
  #bottom .jumbotron h2 {
    font-size: 2rem !important;
  }

  .btn-smn {
	min-width: 18rem !important;
  }
	

  .btn-light {
    background: #fff !important;
    border-color: #fff;
    border-radius: 0;
    padding: 1rem 5rem;
	color: #00413F;
    text-transform: uppercase;
  }
	
  .btn-light:hover {
    background: #00C4B3 !important;
	color: #00413F;
  }
	
	#00C4B3
	
  .btn-envelope {
	min-width: 14rem !important;
  }
	
  .sembg {
	background-size: cover;
	background-position: center;
	min-height: 10rem !important;
  } 
	
  .sembg.b01 {
	background-image: url(../img/bg_01.jpg) !important;
   }
  .sembg.b02 {
	background-image: url(../img/bg_02.jpg) !important;
   }
  .sembg.b03 {
	background-image: url(../img/bg_03.jpg) !important;
   }
  .sembg.b04 {
	background-image: url(../img/bg_04.jpg) !important;
   }
  .sembg.b05 {
	background-image: url(../img/bg_05.jpg) !important;
   }
  .sembg.b06 {
	background-image: url(../img/bg_06.jpg) !important;
   }
  .sembg.b07 {
	background-image: url(../img/bg_07.jpg) !important;
   }
  .sembg.b08 {
	background-image: url(../img/bg_08.jpg) !important;
   }
  .sembg.b09 {
	background-image: url(../img/bg_09.jpg) !important;
   }
  .sembg.b10 {
	background-image: url(../img/bg_10.jpg) !important;
   }
  .sembg.b11 {
	background-image: url(../img/bg_11.jpg) !important;
   }
  .sembg.b12 {
	background-image: url(../img/bg_12.jpg) !important;
   }
  .sembg.b13 {
	background-image: url(../img/bg_13.jpg) !important;
   }
  .sembg.b14 {
	background-image: url(../img/bg_14.jpg) !important;
   }
  .sembg.b15 {
	background-image: url(../img/bg_15.jpg) !important;
   }
  .sembg.b16 {
	background-image: url(../img/bg_16.jpg) !important;
   }
  .sembg.b17 {
	background-image: url(../img/bg_17.jpg) !important;
   }
  .sembg.b18 {
	background-image: url(../img/bg_18.jpg) !important;
   }
  .sembg.b19 {
	background-image: url(../img/bg_19.jpg) !important;
   }
  .sembg.b20 {
	background-image: url(../img/bg_20.jpg) !important;
   }
  .sembg.b21 {
	background-image: url(../img/bg_21.jpg) !important;
   }
  .sembg.b22 {
	background-image: url(../img/bg_22.jpg) !important;
   }
  .sembg.b23 {
	background-image: url(../img/bg_23.jpg) !important;
   }
  .sembg.b24 {
	background-image: url(../img/bg_24.jpg) !important;
   }
  .sembg.b25 {
	background-image: url(../img/bg_25.jpg) !important;
   }
  .sembg.b26 {
	background-image: url(../img/bg_26.jpg) !important;
   }
  .sembg.b27 {
	background-image: url(../img/bg_27.jpg) !important;
   }
  .sembg.b28 {
	background-image: url(../img/bg_28.jpg) !important;
   }
  .sembg.b29 {
	background-image: url(../img/bg_29.jpg) !important;
   }
  .sembg.b30 {
	background-image: url(../img/bg_30.jpg) !important;
   }
  .sembg.b31 {
	background-image: url(../img/bg_31.jpg) !important;
   }
  .sembg.b32 {
	background-image: url(../img/bg_32.jpg) !important;
   }
  .sembg.b33 {
	background-image: url(../img/bg_33.jpg) !important;
   }
  .sembg.b34 {
	background-image: url(../img/bg_34.jpg) !important;
   }
  .sembg.b35 {
	background-image: url(../img/bg_35.jpg) !important;
   }
  .sembg.b36 {
	background-image: url(../img/bg_36.jpg) !important;
   }
  .sembg.b37 {
	background-image: url(../img/bg_37.jpg) !important;
   }
  .sembg.b38 {
	background-image: url(../img/bg_38.jpg) !important;
   }
  .sembg.b39 {
	background-image: url(../img/bg_39.jpg) !important;
   }
  .sembg.b40 {
	background-image: url(../img/bg_40.jpg) !important;
   }
  .sembg.b41 {
	background-image: url(../img/bg_41.jpg) !important;
   }
	

  .modal-content {
	/* min-width: 60rem; */
   }
   
  .modal-body li {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem !important;
	font-size: 0.9rem !important;
   }
   
  .modal-body ul li p {
    text-indent: 2rem !important;
    font-size: 0.9rem !important;
  }
	
   .modal.show .modal-dialog {
	max-width: 40rem;
   }
	
	.videomodal {
    max-width: 60rem !important;
	}
	
   #envelopeid .modal-dialog, #add .modal-dialog  {
	max-width: 40rem !important;
   }

   #envelopeid .modal-body ul li {
    border-bottom: none;
	margin-bottom: 0;
    font-size: 1.2rem !important;
	}
	
   .modal-header {
	min-height: 2rem !important;
   }
   
   .modal-title {
    margin-top: 1rem !important;
  }
	
   .modal-body {
    padding: 2rem !important;
  }
	
   .feedback {
	padding: 6rem 2rem 10rem !important;
   }
  
  .carousel-control-prev { left: -5rem; }
  .carousel-control-next { right: -5rem; }
  .carousel-item.multi img {max-width: 200px !important;}
	
}

@media (min-width: 62em) {


}

/* CUSTOM */

.navbar {
    padding: 1rem;
}

.navbar a {
	color: #00413F !important;
	/* font-weight: bold; */
}

.navbar a:hover {
	color: #007078 !important;
}

.nav-link {
    padding: 0 1rem;
	padding-right: 3rem !important;
}

.nav-link.phone {
	font-weight: bold;
}

.stream .nav-link {
	padding-right: 0.8rem !important;
}

.nav-link.envelope {
    padding: 0 1rem !important;
}

.envelope {
	margin-left: 20px;
	height: 48px;
    width: 48px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #00413F;
	text-align: center;
	margin-right: auto;
}

.envelope:hover {
    -webkit-box-shadow: 0px 0px 13px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow: 0px 0px 13px 0px rgba(50, 50, 50, 0.3);
    box-shadow: 0px 0px 13px 0px rgba(50, 50, 50, 0.3);
}

.envelope img {
    margin-left: -4px;
    margin-top: 14px;
}

.envelope:hover img {
    opacity: 0.8;
}


.parametr {
    border: 2px solid #00C4B3;
    padding: 2rem;
	margin-top: 2rem;
	margin-right: 4rem;
	min-width: 18rem;
}

.parametr ul {
    list-style: none;
    margin-left: -2rem;
	margin-bottom: 0;
}

.parametr div {
    margin-left: 4rem;
    line-height: 1.5;
	font-size: 0.85rem;
}

.parametr li:not(:last-child) {
	margin-bottom: 1rem;
}

.parametr img {
	float: left;
}

.timer {
	border: 3px solid #00C4B3;
}


.btn:hover {
    background-color: #058B7F;
	color: white;
}

#catalog h4 {
    font-size: 1.2rem;
    line-height: 1.5;
    margin-top: 2rem;
}

ul.semena {
	list-style: none;
	line-height: 3.5rem;
	padding-right: 3rem;
}

ul.semena li {
	text-decoration: underline;
	color: #00413F;
	font-size: 1.2rem;
}

ul.semena li:before {
	content: &#8594;
	color: #00C4B3;
}

.btn-smn {
    color: white;
    background-color: #00C4B3;
    /* border-color: #007078; */
	border-radius: 0;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
	font-size: 1rem;
	padding: 0.5rem;
	padding-left: 3rem;
	padding-right: 3rem;
	min-width: 100%;
}

.btn-envelope {
	min-width: 100%;
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
	display: inline !important;
}

.btn-envelope.top2 {
	margin-bottom: 2rem;
	margin-top: 0rem;
}

ul.semena a:hover li  {
	text-decoration: none;
}

.arrow {
	cursor: pointer;
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0px;
    float: right;
    top: -30px;
}
.arrow div {
	position: relative;
    top: 0;
    width: 30px;
    height: 2px;
    background-color: #00C4B3;
    left: 0;
    display: block;
}
.arrow div::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 2px;
    top: -4px;
    right: 0px;
    background-color: #00C4B3;
    transform: rotate(45deg);
}
.arrow div::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 2px;
    top: 4px;
    right: 0px;
    background-color: #00C4B3;
    transform: rotate(-45deg);
}
.arrow:hover {
    animation: arrow 0.75s linear infinite;
}
@keyframes arrow {
    0% {
        left:0;
    }
    50% {
        left:5px;
    }
    100% {
        left:0;
    }
}

.semenabg {
	background-size: cover;
	background-position: left;
}

hr.urozhai {
	background: url(../img/hr_urozhai.png) no-repeat center right;
    height: 28px;
    border: none !important;
    margin-top: 5rem;
}

#bottom .urozhai img {
	float: right;
	margin-right: -12px;
}

#bottom h4 {
    font-size: 1.2rem;
    line-height: 1.5;
    margin-top: 1.3rem;
	font-weight: bold;
}

#bottom h2 {
    margin-bottom: 4rem;
}

#bottom p {
	font-size: 0.9rem;
}

#bottom .jumbotron {
	background-size: cover;
	background-position: center;
	background-image: url(../img/semena.jpg) !important;
	margin-top: 3rem;
	margin-bottom: 3rem;
	color: white;
}

#bottom .jumbotron h2 {
    margin-bottom: 2rem;
	font-size: 1.5rem;
    font-weight: bold;
}

#bottom .jumbotron p {
    font-size: 1rem;
}

#bottom .logos img {
	max-width: 150px;
}

.navbar-brand {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    text-align: center;
	margin-bottom: 8px;
}

main {
    margin-bottom: 2rem;
}

#main {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

#catalog {
	margin-top: 2rem;
}

#socials a {
	text-decoration: none;
}

/* Timer */

.countdown {
  display: inline-block;
  text-align: center;
  font-size: 1rem;
}

.countdown-number {
  padding: 1rem;
  display: inline-block;
  font-size: 1rem;
}

.countdown-time {
  padding: 0 5px;
  display: inline-block;
  border-bottom: 2px #00FFDA solid;
  font-size: 8rem;
  font-weight: bold;
}

.countdown-text {
  display: block;
  padding-top: 5px;
  font-size: 16px;
}

.countdown-title {
    padding-top: 2rem;
    text-transform: uppercase;
    margin-bottom: -1rem;
    font-size: 3rem;
}

.online-logo {
	margin-left:35px;
	height: 100%;	
}

.agro {
	padding: 2rem 1rem;;
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.agro h2 {
	font-size: 2.5rem;
}

.agro.border {
	border: solid 3px #00C4B3 !important;
}

.agro.vopros {
	background: #00C4B3 !important;
	color: #fff;
	padding: 3rem;
}

.agro.vopros h4.quest {
	font-weight: bold;
	font-size: 2rem;
}

.agro.vopros h5 {
	font-style: oblique;
}


.agro.reg2 {
	background: #007078 !important;
	color: #fff;
	padding: 3rem;
}

.btn-quest {
	margin-top: 1rem;
    background: #fff;
    font-weight: bold;
    color: #00C4B3;
    text-transform: uppercase;
    padding: 0.5rem 3rem;
	border-radius: 0;
}

.btn-quest:hover {
    background: #00413F;
    color: #fff;
}

.vopros input {
	background: #6AD7C7;
	color: #fff;
	border-radius: 0;
	border: 0;
}

.vopros input:focus {
	background: #00413F;
	color: #fff;
}

.vopros input::-webkit-input-placeholder {color:#fff;}
.vopros input::-moz-placeholder {color:#fff;}
.vopros input:-moz-placeholder {color:#fff;}
.vopros input:-ms-input-placeholder {color:#fff;}

img.adaptive {
	width: 100%;	
}

.uppercase {
	text-transform:uppercase;
}

h2.uppercase.big {
	font-size: 3rem; 
	margin-bottom: -3rem;
}

.speaker {
	padding: 1.5rem 2rem 1rem 1rem;	
}

.speaker p {
	padding-top: 0.5rem;
    /*line-height: 1.5rem;*/
    font-size: 0.9rem;
}

.speaker hr {
	max-width: 6rem;
    border-bottom: solid 3px #00C4B3;
    margin-left: 0;
}

.speaker h5 {
	padding-bottom: 0.5rem;
    padding-top: 1rem;
	font-weight:bold;
}

.speaker h4 {
    padding-bottom: 0.5rem;
	font-weight:bold;
}

.speaker li {
	list-style-image: url("../img/li.png");
}

.speaker li {
    margin-left: -26px;
	font-size: 0.9rem;
	padding-bottom: 0.5rem;
}

.speaker .time {
	color: #00C4B3;
	font-weight: bold;
	font-size: 1.2rem;
}

.padd {
	padding-top: 4.3rem;	
}

h3.semena {
	padding-top: 1rem; 
	font-weight: bold;	
}

.click-for-video {
  width: 100%;
  max-width: 500px;
  max-height: 281px;
  cursor: pointer;
}

.stream-video {
  width: 100%;
  height: 100%;
  max-height: 640px;
  max-width: 1140px;
  cursor: pointer;
}

.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.video iframe, .video object, .video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.videomodal {
	width: 60%;
}


.videomodal .modal-body {
    padding: 1rem !important;
    padding-top: 0 !important;
    background: #007078;
}

.videomodal .modal-header {
    background: #007078;
}

.videomodal .modal-title {
	color: #fff;
}
.videomodal .modal-content {
    border: none !important;
    border-radius: 0 !important;
}





.youtube {
  width: 100%;
  height: 281px;
  max-width: 500px;
  border: 0;
}

.youtube.small {
  width: 100%;
  height: 200px;
  max-width: 360px;
  border: 0;
}

.youtube-stream {
  width: 100%;
  height: 640px;
  max-width: 1140px;
  border: 0;
}

div.youtube {
  display: none;
}

/*
div.youtube-stream {
  display: none;
}
*/

.block {
	background: #94D2D3;
	min-height: 20rem;
	padding: 10rem 6rem 1rem 2rem;
	transition: background 0.5s ease;
}

.block p {
	color: #fff;
	border-bottom: 2px solid #fff;
	padding-bottom: 1rem;
	font-size: 1.4rem
}

.block.one {
	/*background: #007078;*/
}

.block.two {
	background: #007078;
}

.block.three {
	background: #6AD7C7;
}

.block.four {
	background: #00413F;
}

.block.five {
	background: #00C4B3;
}

.block.six {
	/* background: #007078; */
}

.block.one:hover {
	background: url(../img/reason-11.jpg);
}

.block.two:hover {
	background: url(../img/reason-12.jpg);
}

.block.three:hover {
	background: url(../img/reason-13.jpg);
}

.block.four:hover {
	background: url(../img/reason-14.jpg);
}

.block.five:hover {
	background: url(../img/reason-15.jpg);
}

.block.six:hover {
	background: url(../img/reason-16.jpg);
}

h5.sub {
	color: #00C4B3;
}


.seed {
	background: #00413F;
	min-height: 23rem;
	padding: 2rem;
	transition: all 0.5s ease;
}

.seed:hover {
	transform: scale(1.05);
	z-index: 1000;
	cursor: pointer;
	text-decoration: none;
	
}

/* 
.seed:hover:before {
	content: "";
	position:absolute;
	width: 100%;
	height: 100%;
	margin: -2rem;
	background: rgba(0,0,0,0.3);
	z-index: 10;
} 
*/

.seed:hover p {
	/* opacity:0.5; */
}

.seed:hover > div {
	/* visibility: hidden; */
}

/*
.seed div.play {
	visibility: hidden;
	position: absolute;
	top: calc(50% - 52px);
    left: calc(50% - 52px);
	background-image: url(../img/play.png) !important;
	width: 105px;
	height: 105px;
} */

.seed:hover div.play {
	visibility: visible;
	opacity:1;
	z-index: 1;
}

.seed:hover p {
	text-decoration: none;
}

.seed p {
	color: #fff;
	padding-bottom: 0;
    margin-bottom: 0;
	font-size: 1.6rem;
	line-height: 1.5rem;
	padding-top: 1rem;
}

.seed.soya, .seed.peas {
	background-color: #00413F;
}

.seed.corn, .seed.jar, .seed.buck {
	background-color: #94D2D3;
}

.seed.beet, .seed.do, .seed.peas {
	background-color: #00C4B3;
}

.seed.grain, .seed.sun {
	background-color: #007078;
}


.seed > div {
	width: 80px;
    height: 80px;
    right: 2rem;
    bottom: 2rem;
    position: absolute;
	background-repeat: no-repeat;
	background-image: url(../img/seed-play.png);
}

/*
.seed.soya div {
	background-image: url(../img/seed-soya.png);
}

.seed.corn div {
	background-image: url(../img/seed-corn.png);
}

.seed.beet div {
	background-image: url(../img/seed-beet.png);
}

.seed.grain div {
	background-image: url(../img/seed-grain.png);
}

.seed.do div {
	background-image: url(../img/seed-do.png);
}

.seed.sun div {
	background-image: url(../img/seed-sun.png);
}

.seed.jar div {
	background-image: url(../img/seed-jar.png);
}

.seed.peas div {
	background-image: url(../img/seed-peas.png);
}

.seed.buck div {
	background-image: url(../img/seed-buck.png);
}  */


.seed.soya:hover {
	background-image: url(../img/seed-soya-bg.jpg);
}

.seed.corn:hover {
	background-image: url(../img/seed-corn-bg.jpg);
}

.seed.beet:hover {
	background-image: url(../img/seed-beet-bg.jpg);
}

.seed.grain:hover {
	background-image: url(../img/seed-grain-bg.jpg);
}

.seed.peas:hover {
	background-image: url(../img/seed-peas-bg.jpg);
}

.seed.buck:hover {
	background-image: url(../img/seed-buck-bg.jpg);
}

.seed.soya.cult:hover {
	background-image: url(../img/soya-bg.jpg);
}

.seed.corn.cult:hover {
	background-image: url(../img/corn-bg.jpg);
}

.seed.beet.cult:hover {
	background-image: url(../img/beet-bg.jpg);
}

.seed.grain.cult:hover {
	background-image: url(../img/grain-bg.jpg);
}

.seed.jar.cult:hover {
	background-image: url(../img/jar-bg.jpg);
}

.seed.peas.cult:hover {
	background-image: url(../img/peas-bg.jpg);
}




/* Modals */

.modal-header {
	background-color: #2ED9C3;
	padding: 0;
	min-height: 1rem;
	/* padding: 0; */
    margin: 0;
	color: white !important;
	border: 0;
}

.modal-header div.bg {
	/* background: #007078;	 */
}

.sembg {
    min-height: 1rem;
}

.modal-header .close {
    padding: 2rem;
	opacity: 1;
}

#reg .modal-title, #gift .modal-title {
	color: #fff;
}


#reg input, #reg select, #gift input {
	border-radius: 0;
	margin-bottom: 1rem;
}

#reg #submit_btn, #gift #submit_btn {
	border-radius: 0;
	width: 100%;
	background: #00C4B3;
	color: #fff;
	text-transform: uppercase;
}

#reg #submit_btn:hover, #gift #submit_btn:hover {
	background: #007078;
}


.modal-title {
	color: #00413F;
	margin-top: 1rem;
	margin-left: 2rem;
	font-size: 1.8rem !important;
	z-index: 1000;
}

.modal-content p {
	font-size: 0.8rem;
}

.btn-envelope {
    color: white !important;
    background-color: #007078;
	border-radius: 0;
	text-transform: uppercase;
	padding: 0.5rem !important;
	font-size: 1rem !important;
	padding-left: 3rem !important;
	padding-right: 3rem !important;
}

.btn-envelope:hover {
    background-color: #00413F;
}

.btn-envelope.added {
	background-color: #00413F;
}

.modal-body {
    padding: 1rem;
}

.modal-body ul {
    list-style: none;
    padding-left: 0;
    font-size: 0.9rem;
    margin-top: 1rem;
}

.modal-body h5 {
	font-weight: bold;
}


.modal-body li {
	border-bottom: none;
    padding-bottom: 2rem;
    font-size: 0.8rem;
	font-weight: bold;
}

.modal-body li:last-child {
    border-bottom: none;
}

.modal-body ul li span {
    float: right;
	font-weight: normal;
	border-bottom: 1px solid #DAE1EA;
    margin-bottom: 1rem;
	width: 100%;
    text-align: right;
    padding-bottom: 1rem;
}

.modal-body ul li p {
    text-indent: 1rem;
    font-size: 0.8rem;
	margin: 0;
    
}

#policy .modal-title {
    margin-top: 2rem !important;
	font-size: 1.5rem;
}

#envelopeid .modal-title, #add .modal-title {
    margin-top: 2rem !important;
	font-size: 1.5rem;
}
	
#envelopeid hr, #envelopeid hr {
    border-top: 1px solid rgba(0,0,0,.2);
    width: calc(100% - 4rem);
}

#envelopeid .modal-body ul li a.close-envelope, #add .modal-body ul li a.close-envelope {
    float: right;
    background: url(../img/close-envelope.png) no-repeat;
    width: 20px;
    height: 20px;
	margin-top: 1px;
}

#envelopeid button.close.dark, #policy button.close.dark, #add button.close.dark {
    position: absolute;
    right: 2rem;
    top: 2rem;
	z-index: 1000;
}

#envelopeid .modal-body ul {
    list-style: none;
    font-size: 1.2rem;
    margin-top: -1rem;
}

#envelopeid .modal-body ul li {
    border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 1rem !important; 
    font-size: 0.9rem;
}

#envelopeid .modal-body input, #envelopeid .modal-body select {
    padding: 0 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid #ddd;
    color: #333;
	font-size: 1rem;
}

img.bg1 {
   display: none;
   width: 100%;
	/* height: 100%; */
   max-width: 475px;
  }
  
.policybtn, #policy_ok {
	text-decoration:underline;
}

#socials {
    margin: 1rem 0;
}

.item_parent {
	visibility: hidden;
    height: 0 !important;
    width: 0 !important;
}

.btn.disabled, .btn:disabled {
    opacity: 1;
    cursor: auto;
}

.feedback {
	padding: 2rem 1rem;
	
}




/* SLIDER */

#viewport {
    width: 100%;
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    text-align: center;
	padding-bottom: 3rem;
}

#slidewrapper {
    position: relative;
    width: calc(100% * 9);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    -webkit-transition-timing-function: cubic-bezier(.67,.01,.23,1);
    -o-transition-timing-function: cubic-bezier(.67,.01,.23,1);
    transition-timing-function: cubic-bezier(.67,.01,.23,1);
}

#slidewrapper, #slidewrapper ul, #slidewrapper li {
    margin: 0;
    padding: 0;
}

.slide {
    width: calc(100%/9); 
    list-style: none;
    display: inline;
    float: left;
}

.slide-img {
    width: 100%;
}

#prev-btn, #next-btn {
    position: absolute;
    width: 37px;
    height: 37px;
    bottom: 0;
}

#prev-btn:hover, #next-btn:hover {
    cursor: pointer;
}

#prev-btn {
    left: calc(42% + 40px);
}

#next-btn {
    right: calc(42% + 40px);
}

#prev-btn:hover img, #next-btn:hover img {
 	filter: brightness(350%);
}

.slide-nav-btn {
    position: relative;
    display: inline-block;
    list-style: none;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    margin: 3px;
}

.slide-nav-btn:hover {
    cursor: pointer;
}

/* END SLIDER */

@media (max-width: 767px) {
	
	.videomodal {
		width: 95%;
	}
	
  	img.adaptive {
  		width: 100%;
	}
	
	.agro h2 {
    	font-size: 1.7rem;
	}
	
	.agro h3 {
    	font-size: 1.5rem;
	}
	
	.hide-mobile {
	display: none !important;
    }
	
	
	#prev-btn {
		left: calc(42% - 25px);
	}

	#next-btn {
		right: calc(42% - 25px);
	}
	
	#prev-btn img, #next-btn img {
 		filter: brightness(350%);
	}
	
	h4.uppercase {
    	font-size: 1rem;
	}
	
	h2.uppercase.big {
    	font-size: 1.7rem;
	}
	
	.countdown-title {
		font-size: 2rem;
	}
	
	.countdown-number {
	    padding-top: 0;
	}
	
	.block {
		padding: 6rem 4rem 1rem 2rem;
	}
	
	.block p {
		font-size: 1.2rem;
	}
	
	h3.uppercase {
    	padding-top: 1rem;
	}
	
	.form-control-lg {
    	margin-bottom: 0.5rem;
		font-size: 1rem;
	}
	
	.modal-title {
	    margin-top: 1.5rem;
    	margin-left: 0;
		font-size: 1rem !important;
	}
	
	.agro.vopros {
    	padding: 2rem 1rem;
	}
	
	.online-logo {
    	margin-left: 5px;
	}
	
	.bg-header {
		min-height: 10rem;	
	}
	
	.padd {
		padding-top: 1rem;	
	}
}


/* 
	Sweet alert
*/

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);
.sweet-overlay {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
  z-index: 1000; }

.sweet-alert {
  background-color: white;
  /*font-family: 'Open Sans', sans-serif;*/
  width: 40rem;
  padding: 2rem;
  border-radius: 5px;
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -25rem;
  margin-top: -20rem;
  overflow: hidden;
  display: none;
  z-index: 2000; }
  @media all and (max-width: 540px) {
    .sweet-alert {
      width: auto;
      margin-left: 0;
      margin-right: 0;
      left: 15px;
      right: 15px; } }
  .sweet-alert h2 {
    color: #575757;
    font-size: 30px;
    text-align: center;
    font-weight: 600;
    text-transform: none;
    position: relative; }
  .sweet-alert p {
    color: #797979;
    font-size: 16px;
    text-align: center;
    font-weight: 300;
    position: relative;
    margin: 0;
    line-height: normal; }
  .sweet-alert button {
    background-color: #AEDEF4;
    color: white;
    border: none;
    box-shadow: none;
    font-size: 17px;
    font-weight: 500;
    border-radius: 5px;
    padding: 10px 32px;
    margin: 26px 5px 0 5px;
    cursor: pointer; }
    .sweet-alert button:focus {
      outline: none;
      box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
    .sweet-alert button:hover {
      background-color: #a1d9f2; }
    .sweet-alert button:active {
      background-color: #81ccee; }
    .sweet-alert button.cancel {
      background-color: #D0D0D0; }
      .sweet-alert button.cancel:hover {
        background-color: #c8c8c8; }
      .sweet-alert button.cancel:active {
        background-color: #b6b6b6; }
      .sweet-alert button.cancel:focus {
        box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; }
  .sweet-alert[data-has-cancel-button=false] button {
    box-shadow: none !important; }
  .sweet-alert .icon {
    width: 80px;
    height: 80px;
    border: 4px solid gray;
    border-radius: 50%;
    margin: 20px auto;
    position: relative;
    box-sizing: content-box; }
    .sweet-alert .icon.error {
      border-color: #F27474; }
      .sweet-alert .icon.error .x-mark {
        position: relative;
        display: block; }
      .sweet-alert .icon.error .line {
        position: absolute;
        height: 5px;
        width: 47px;
        background-color: #F27474;
        display: block;
        top: 37px;
        border-radius: 2px; }
        .sweet-alert .icon.error .line.left {
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          left: 17px; }
        .sweet-alert .icon.error .line.right {
          -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
          right: 16px; }
    .sweet-alert .icon.warning {
      border-color: #F8BB86; }
      .sweet-alert .icon.warning .body {
        position: absolute;
        width: 5px;
        height: 47px;
        left: 50%;
        top: 10px;
        border-radius: 2px;
        margin-left: -2px;
        background-color: #F8BB86; }
      .sweet-alert .icon.warning .dot {
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-left: -3px;
        left: 50%;
        bottom: 10px;
        background-color: #F8BB86; }
    .sweet-alert .icon.info {
      border-color: #C9DAE1; }
      .sweet-alert .icon.info::before {
        content: "";
        position: absolute;
        width: 5px;
        height: 29px;
        left: 50%;
        bottom: 17px;
        border-radius: 2px;
        margin-left: -2px;
        background-color: #C9DAE1; }
      .sweet-alert .icon.info::after {
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-left: -3px;
        top: 19px;
        background-color: #C9DAE1; }
    .sweet-alert .icon.success {
      border-color: #A5DC86; }
      .sweet-alert .icon.success::before, .sweet-alert .icon.success::after {
        content: '';
        border-radius: 50%;
        position: absolute;
        width: 60px;
        height: 120px;
        background: white;
        transform: rotate(45deg); }
      .sweet-alert .icon.success::before {
        border-radius: 120px 0 0 120px;
        top: -7px;
        left: -33px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 60px 60px;
        transform-origin: 60px 60px; }
      .sweet-alert .icon.success::after {
        border-radius: 0 120px 120px 0;
        top: -11px;
        left: 30px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0px 60px;
        transform-origin: 0px 60px; }
      .sweet-alert .icon.success .placeholder {
        width: 80px;
        height: 80px;
        border: 4px solid rgba(165, 220, 134, 0.2);
        border-radius: 50%;
        box-sizing: content-box;
        position: absolute;
        left: -4px;
        top: -4px;
        z-index: 2; }
      .sweet-alert .icon.success .fix {
        width: 5px;
        height: 90px;
        background-color: white;
        position: absolute;
        left: 28px;
        top: 8px;
        z-index: 1;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg); }
      .sweet-alert .icon.success .line {
        height: 5px;
        background-color: #A5DC86;
        display: block;
        border-radius: 2px;
        position: absolute;
        z-index: 2; }
        .sweet-alert .icon.success .line.tip {
          width: 25px;
          left: 14px;
          top: 46px;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg); }
        .sweet-alert .icon.success .line.long {
          width: 47px;
          right: 8px;
          top: 38px;
          -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg); }
    .sweet-alert .icon.custom {
      background-size: contain;
      border-radius: 0;
      border: none;
      background-position: center center;
      background-repeat: no-repeat; }

/*
 * Animations
 */
@-webkit-keyframes showSweetAlert {
  0% {
    transform: scale(0.7);
    -webkit-transform: scale(0.7); }
  45% {
    transform: scale(1.05);
    -webkit-transform: scale(1.05); }
  80% {
    transform: scale(0.95);
    -webkit-tranform: scale(0.95); }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1); } }
@-moz-keyframes showSweetAlert {
  0% {
    transform: scale(0.7);
    -webkit-transform: scale(0.7); }
  45% {
    transform: scale(1.05);
    -webkit-transform: scale(1.05); }
  80% {
    transform: scale(0.95);
    -webkit-tranform: scale(0.95); }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1); } }
@keyframes showSweetAlert {
  0% {
    transform: scale(0.7);
    -webkit-transform: scale(0.7); }
  45% {
    transform: scale(1.05);
    -webkit-transform: scale(1.05); }
  80% {
    transform: scale(0.95);
    -webkit-tranform: scale(0.95); }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1); } }
@-webkit-keyframes hideSweetAlert {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1); }
  100% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5); } }
@-moz-keyframes hideSweetAlert {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1); }
  100% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5); } }
@keyframes hideSweetAlert {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1); }
  100% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5); } }
.showSweetAlert {
  -webkit-animation: showSweetAlert 0.3s;
  -moz-animation: showSweetAlert 0.3s;
  animation: showSweetAlert 0.3s; }

.hideSweetAlert {
  -webkit-animation: hideSweetAlert 0.2s;
  -moz-animation: hideSweetAlert 0.2s;
  animation: hideSweetAlert 0.2s; }

@-webkit-keyframes animateSuccessTip {
  0% {
    width: 0;
    left: 1px;
    top: 19px; }
  54% {
    width: 0;
    left: 1px;
    top: 19px; }
  70% {
    width: 50px;
    left: -8px;
    top: 37px; }
  84% {
    width: 17px;
    left: 21px;
    top: 48px; }
  100% {
    width: 25px;
    left: 14px;
    top: 45px; } }
@-moz-keyframes animateSuccessTip {
  0% {
    width: 0;
    left: 1px;
    top: 19px; }
  54% {
    width: 0;
    left: 1px;
    top: 19px; }
  70% {
    width: 50px;
    left: -8px;
    top: 37px; }
  84% {
    width: 17px;
    left: 21px;
    top: 48px; }
  100% {
    width: 25px;
    left: 14px;
    top: 45px; } }
@keyframes animateSuccessTip {
  0% {
    width: 0;
    left: 1px;
    top: 19px; }
  54% {
    width: 0;
    left: 1px;
    top: 19px; }
  70% {
    width: 50px;
    left: -8px;
    top: 37px; }
  84% {
    width: 17px;
    left: 21px;
    top: 48px; }
  100% {
    width: 25px;
    left: 14px;
    top: 45px; } }
@-webkit-keyframes animateSuccessLong {
  0% {
    width: 0;
    right: 46px;
    top: 54px; }
  65% {
    width: 0;
    right: 46px;
    top: 54px; }
  84% {
    width: 55px;
    right: 0px;
    top: 35px; }
  100% {
    width: 47px;
    right: 8px;
    top: 38px; } }
@-moz-keyframes animateSuccessLong {
  0% {
    width: 0;
    right: 46px;
    top: 54px; }
  65% {
    width: 0;
    right: 46px;
    top: 54px; }
  84% {
    width: 55px;
    right: 0px;
    top: 35px; }
  100% {
    width: 47px;
    right: 8px;
    top: 38px; } }
@keyframes animateSuccessLong {
  0% {
    width: 0;
    right: 46px;
    top: 54px; }
  65% {
    width: 0;
    right: 46px;
    top: 54px; }
  84% {
    width: 55px;
    right: 0px;
    top: 35px; }
  100% {
    width: 47px;
    right: 8px;
    top: 38px; } }
@-webkit-keyframes rotatePlaceholder {
  0% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
  5% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
  12% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg); }
  100% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg); } }
@-moz-keyframes rotatePlaceholder {
  0% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
  5% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
  12% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg); }
  100% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg); } }
@keyframes rotatePlaceholder {
  0% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
  5% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
  12% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg); }
  100% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg); } }
.animateSuccessTip {
  -webkit-animation: animateSuccessTip 0.75s;
  -moz-animation: animateSuccessTip 0.75s;
  animation: animateSuccessTip 0.75s; }

.animateSuccessLong {
  -webkit-animation: animateSuccessLong 0.75s;
  -moz-animation: animateSuccessLong 0.75s;
  animation: animateSuccessLong 0.75s; }

.icon.success.animate::after {
  -webkit-animation: rotatePlaceholder 4.25s ease-in;
  -moz-animation: rotatePlaceholder 4.25s ease-in;
  animation: rotatePlaceholder 4.25s ease-in; }

@-webkit-keyframes animateErrorIcon {
  0% {
    transform: rotateX(100deg);
    -webkit-transform: rotateX(100deg);
    opacity: 0; }
  100% {
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    opacity: 1; } }
@-moz-keyframes animateErrorIcon {
  0% {
    transform: rotateX(100deg);
    -webkit-transform: rotateX(100deg);
    opacity: 0; }
  100% {
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    opacity: 1; } }
@keyframes animateErrorIcon {
  0% {
    transform: rotateX(100deg);
    -webkit-transform: rotateX(100deg);
    opacity: 0; }
  100% {
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    opacity: 1; } }
.animateErrorIcon {
  -webkit-animation: animateErrorIcon 0.5s;
  -moz-animation: animateErrorIcon 0.5s;
  animation: animateErrorIcon 0.5s; }

@-webkit-keyframes animateXMark {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    margin-top: 26px;
    opacity: 0; }
  50% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    margin-top: 26px;
    opacity: 0; }
  80% {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
    margin-top: -6px; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    margin-top: 0;
    opacity: 1; } }
@-moz-keyframes animateXMark {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    margin-top: 26px;
    opacity: 0; }
  50% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    margin-top: 26px;
    opacity: 0; }
  80% {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
    margin-top: -6px; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    margin-top: 0;
    opacity: 1; } }
@keyframes animateXMark {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    margin-top: 26px;
    opacity: 0; }
  50% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    margin-top: 26px;
    opacity: 0; }
  80% {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
    margin-top: -6px; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    margin-top: 0;
    opacity: 1; } }
.animateXMark {
  -webkit-animation: animateXMark 0.5s;
  -moz-animation: animateXMark 0.5s;
  animation: animateXMark 0.5s; }

/*@include keyframes(simpleRotate) {
	0%		{ transform: rotateY(0deg);    }
  100% 	{ transform: rotateY(-360deg); }
}
.simpleRotate {
	@include animation('simpleRotate 0.75s');
}*/
@-webkit-keyframes pulseWarning {
  0% {
    border-color: #F8D486; }
  100% {
    border-color: #F8BB86; } }
@-moz-keyframes pulseWarning {
  0% {
    border-color: #F8D486; }
  100% {
    border-color: #F8BB86; } }
@keyframes pulseWarning {
  0% {
    border-color: #F8D486; }
  100% {
    border-color: #F8BB86; } }
.pulseWarning {
  -webkit-animation: pulseWarning 0.75s infinite alternate;
  -moz-animation: pulseWarning 0.75s infinite alternate;
  animation: pulseWarning 0.75s infinite alternate; }

@-webkit-keyframes pulseWarningIns {
  0% {
    background-color: #F8D486; }
  100% {
    background-color: #F8BB86; } }
@-moz-keyframes pulseWarningIns {
  0% {
    background-color: #F8D486; }
  100% {
    background-color: #F8BB86; } }
@keyframes pulseWarningIns {
  0% {
    background-color: #F8D486; }
  100% {
    background-color: #F8BB86; } }
.pulseWarningIns {
  -webkit-animation: pulseWarningIns 0.75s infinite alternate;
  -moz-animation: pulseWarningIns 0.75s infinite alternate;
  animation: pulseWarningIns 0.75s infinite alternate; }



/* Табы */

$tabs-base-color: #8e44ad;
* {
  margin: 0;
  padding: 0; 
  @include box-sizing(border-box);
}


.tabs {
  width: 650px;  
  float: none;
  list-style: none;
  position: relative;
  margin: 80px 0 0 10px;
  text-align: left;
  li {
    float: left;
    display: block;
  }
  input[type="radio"] {
    position: absolute;
    top: 0;
    left: -9999px;
  }
  label {
    display: block;
    padding: 14px 21px;
    border-radius: 2px 2px 0 0;
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase;
    background: $tabs-base-color;
    cursor: pointer;
    position: relative;
    top: 4px; 
    @include transition(all 0.2s ease-in-out);
    &:hover {
      background: darken($tabs-base-color, 10);
    }
  }
  .tab-content{
    z-index: 2;
    display: none; 
    overflow: hidden;
    width: 100%;
    font-size: 17px;
    line-height: 25px;
    padding: 25px;  
    position: absolute;
    top: 53px;
    left: 0; 
    background: darken($tabs-base-color, 15);
  }
  //The Magic
  [id^="tab"]:checked + label { 
    top: 0;
    padding-top: 17px; 
    background: darken($tabs-base-color, 15); 
  }
  [id^="tab"]:checked ~ [id^="tab-content"] {
    display: block;
  }
}
p.link {
  clear: both;
  margin: 380px 0 0 15px;
  a {
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    color: #fff;
    padding: 5px 10px;
    margin: 0 5px;
    background-color: darken($tabs-base-color, 15);
    @include transition(all 0.2s ease-in);
    &:hover {
      background-color: darken($tabs-base-color, 20);
    }
  }
}