

/*

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);

input[type="radio"] { display: none; }

input[type="radio"]:checked + section { display: block; }

*/



@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);

input[type="radio"] { display: none; }

input[type="radio"]:checked + section { display: block; }


/*
.container-quote { display: block; }

input:checked + .container-quote .quote {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease-in-out;
}

input:checked + .container-quote .nav label { display: block; }
*/


.wrapper-quote ::-webkit-scrollbar { 
    display: none; 
}

/*::-webkit-scrollbar { 
    display: none; 
}
*/



.container-quote * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}


.wrapper-quote {
  margin-top: 100px;
  margin-bottom: 100px;

}


.quote {
  transition: all .7s ease-in-out;
}


.quote-title {
  padding-bottom: 50px;
}

.container-quote {
  margin-top: -50px;
  width: 50vw;
  min-height: 100px;
  display: block;
  /*overflow: auto;*/
}

@media (max-width: 550px) {

.container-quote {
  margin-top: -50px;
  width: 80vw;
  
  }

  .wrapper-quote .card {
    width: 80vw;

  }
}
@media (min-width: 550px) {

.container-quote {
  margin-top: -50px;
  width: 85vw;
  }

  .wrapper-quote .card {
    width: 80vw;
  }
}

@media (min-width: 992px) {

.container-quote {
  width: 60vw;

  }

  .wrapper-quote .card {
    width: 60vw;
  }
  
}

@media (max-width: 992px) {
  .wrapper-contact {
      margin-top: 70px;
    }
}

.contactme {
    margin-bottom: 20px;
  }



.container-quote .quote {
  display: none;
  height: 100%;
  padding: 15px;
  text-align: center;
}

.container-quote section h1 {
  margin-bottom: 0;
  font-family: 'Nunito', sans-serif;
  font-weight: lighter;
  font-size: 2em;
}

.container-quote section p {
  width: 75%;
  margin: 0 auto;
  padding: 10px;
}

.container-quote section .nav label {
  display: inline-block;
  cursor: pointer;
  font-size: 1.5em;
  bottom: 0;
}

.container-quote section .nav label:nth-child(odd) { right: 120px; }

.container-quote section .nav label:nth-child(even) { left: 120px; }

.container-quote section > i {
  font-size: 6em !important;
  margin-top: 50px;
  margin-bottom: 25px;
}

.quote-1 {
  border-radius: 15px;
  border-width: 3px;
  border-color: #2980b9;
  display: inline-block;
}
.quote-2 {
  border-radius: 15px;
  border-width: 3px;
  border-color: orange;
}
.quote-3 {
  border-radius: 15px;
  border-width: 3px;
  border-color: #cc0000;
}
.quote-4 {
  border-radius: 15px;
  border-width: 3px;
  border-color: #16a085;
}
.quote-5 {
  border-radius: 15px;
  border-width: 3px;
  border-color: #236045;
}



.container-quote section div {
  display: inline-block;
  overflow: scroll;
}

.container-quote section .nav {
  display: inline-block;
  overflow: visible;
}

.quote-title {
  margin-bottom: -30px;


}

.header {
  font-size: 2.5em;
  font-weight: 50;
  color: #656565;
  text-align: center;
  align-content: center;
  align-items: center;
  justify-content: center;
}


.quote-text {
  display: inline-block;
   overflow: scroll;
}


@media (max-width: 992px) {
  .quote-title {
    margin-bottom: 30px;
  }
  .wrapper-quote  {
    border-width: 0px;
  }
}



/* ARROWS  */


.arrow {
  width: 4vmin;
  height: 4vmin;
  background: transparent;
  border-top: 1vmin solid grey;
  border-right: 1vmin solid grey;
  box-shadow: 0 0 0 lightgray;
  transition: all 200ms ease;
}
.arrow.left {
  position: relative;
  left: -40vw;
  top: 100px;
  transform: translate3d(0, -50%, 0) rotate(-135deg);
}
.arrow.right {
  position: relative;
  left: 40vw;
  top: 100px;
  transform: translate3d(0, -50%, 0) rotate(45deg);
}
.arrow:hover {
  border-color: orange;
  box-shadow: 0.5vmin -0.5vmin 0 white;
}
.arrow:before {
  content: '';
  transform: translate(-40%, -60%) rotate(45deg);
  width: 200%;
  height: 200%;
}



/* DOTS  */

.nav-dots {
  width: 100%;
  position: relative;
  text-align: center;
  bottom: 9px;
  height: 11px;
  display: block;
  overflow: visible;
  padding-top: 20px;
}

.nav-dots .nav-dot {
  top: -5px;
  width: 11px;
  height: 11px;
  margin: 0 4px;
  position: relative;
  border-radius: 100%;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.8);
}

input#rad1:checked ~ .nav-dots label#dot1,
input#rad2:checked ~ .nav-dots label#dot2,
input#rad3:checked ~ .nav-dots label#dot3,
input#rad4:checked ~ .nav-dots label#dot4,
input#rad5:checked ~ .nav-dots label#dot5,
input#rad6:checked ~ .nav-dots label#dot6 {
  background: rgba(0, 0, 0, 0.8);
}
