/*
	*********************************************************************************************************************
	Custom RESPONSIVE SASS - Project: LondonITU
	Tasks: Html / Css / jQuery
	Client: Wonton
	Version: 1.0
	********************************************************************************************************************
*/
/* *********************************************************************************************************************
 * IMPORTS
 */
/* *********************************************************************************************************************
 * RESPONSIVE MEDIA QUERIES
 */
/* 1024 SCREENS */
@media screen and (max-width: 1024px) {
  p {
    line-height: 23px;
  }

  .section .grid-container {
    padding-top: 100px;
  }

  .section.home .slideshow ul li .grid-container {
    top: 60%;
  }

  .about h2, .what h2, .mission h2, .where h2, .who h2, .contact h2 {
    padding-bottom: 10px;
  }

  .what {
    background-image: url("../images/what/bkg-1024.jpg");
  }
  .what .grid-35 {
    padding-left: 35px;
  }
  .what .grid-35 li {
    font-size: 14px;
  }

  .mission .grid-container {
    padding-top: 120px;
  }

  .who .grid-container {
    padding-top: 80px;
  }
  .who .grid-15 {
    height: 230px;
  }
  .who .grid-15 div {
    line-height: 15px;
    margin-top: 5px;
  }
  .who .curriculum p {
    line-height: 20px !important;
  }

  .contact .form {
    margin-top: 35px;
  }

  .scrollup {
    bottom: 10px;
    right: 10px;
  }
  .scrollup:after {
    display: none;
  }
}
/* PORTRAIT TABLET TO LANDSCAPE AND DESKTOP */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .rwd-break {
    display: block;
  }

  .section.home .slideshow ul li .grid-container {
    top: 60%;
  }
  .section.home .slideshow .address p {
    margin-top: -65px;
    letter-spacing: 0;
  }

  .about {
    background-position: right center;
  }
  .about .grid-container > div {
    padding: 0 40px;
  }

  .what {
    background: #fff url("");
  }
  .what .grid-container > div {
    padding: 0 40px;
  }
  .what .tablet-grid-50 {
    margin-top: 50px;
  }
  .what .tablet-grid-50:last-child {
    padding: 0 40px 0 0 !important;
  }

  .mission {
    background-position: -240px center;
  }
  .mission .grid-container > div {
    padding: 0 40px;
  }

  .where h2 {
    padding-top: 50px;
  }
  .where .grid-container > div {
    padding: 0 40px;
  }
  .where .grid-35:last-child {
    margin-left: 0;
  }
  .where .tablet-grid-50:first-child {
    padding: 0 0 0 40px !important;
  }
  .where .tablet-grid-50:last-child {
    padding: 0 40px 0 0 !important;
  }

  .who h2 {
    padding: 20px 0;
  }
  .who .grid-container > div {
    padding: 0 40px;
  }
  .who .grid-15 {
    margin-right: 0;
    height: 210px;
  }
  .who .thumbnails {
    text-align: center;
  }

  .contact h2 {
    padding-top: 50px;
  }
  .contact .grid-container .grid-100,
  .contact .grid-container .grid-50,
  .contact .footer {
    padding: 0 60px;
  }
  .contact #message {
    height: 250px;
  }
  .contact .legal {
    margin-top: 20px;
  }
  .contact .submit-bt {
    margin-top: -20px;
  }
  .contact .loader-icon {
    background-color: transparent;
    margin: -35px 25px 0 0;
  }
  .contact .footer {
    width: 90%;
    margin: 0 3%;
    text-align: center;
  }
  .contact .footer .copyright-menu {
    float: none;
    margin-bottom: 5px;
  }
}
/* LANDSCAPE PHONES AND DOWN */
@media screen and (max-width: 767px) {
  h1 {
    font-size: 23px;
    line-height: 27px;
  }

  h2 {
    font-size: 16px;
  }

  #header .hamburguer {
    float: right;
    margin: 36px 10px 0 0;
    cursor: pointer;
  }
  #header .menu {
    position: relative;
    float: none;
    top: -200px;
    background-color: #000;
    padding: 20px;
    z-index: 1;
  }
  #header .menu ul {
    margin: 0 auto;
  }
  #header .menu ul li {
    display: block;
    margin-bottom: 10px;
  }
  #header .menu a {
    background-color: #333333;
    padding: 6px 8px;
    font-size: 12px;
    color: #999999;
    margin: 0;
  }
  #header .menu a:hover {
    color: #fff;
  }
  #header .menu a.current {
    color: #fff;
  }

  .section.about,
  .section.what,
  .section.mission,
  .section.where,
  .section.who,
  .section.contact {
    height: auto;
  }

  .section .grid-container {
    padding-top: 30px;
  }

  .section.home .slideshow ul li {
    background-position: left top !important;
  }
  .section.home .slideshow ul li .grid-container {
    top: 65%;
  }
  .section.home .slideshow ul li .bullets {
    margin: 10px 0 8px 0;
  }
  .section.home .slideshow ul li h5 {
    font-size: 13px;
  }
  .section.home .slideshow ul li .text {
    font-size: 15px;
  }
  .section.home .slideshow .controls a {
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
  }
  .section.home .slideshow .controls #prev {
    margin-left: 8px;
  }
  .section.home .slideshow .controls #next {
    float: left;
    margin-left: -15px;
  }

  .about {
    background-position: right center;
  }
  .about h1 {
    padding-top: 0;
  }
  .about h2 {
    padding-bottom: 0;
  }
  .about .grid-35 {
    padding-left: 10px;
  }

  .what {
    background: #fff url("");
  }
  .what h1 {
    padding: 0 0 20px 0;
  }
  .what h2 {
    padding-bottom: 0;
  }
  .what .grid-35 {
    padding-left: 10px;
    margin-bottom: 30px;
  }
  .what .hide-on-desktop {
    margin: 20px 0;
  }

  .mission {
    background-position: -560px center;
  }
  .mission h2 {
    padding-bottom: 0;
  }
  .mission .grid-container > div {
    padding: 0 10px;
  }

  .where {
    background-color: #DBDAE1;
    background-position: center 80px;
  }
  .where h2 {
    padding-top: 0;
  }
  .where .grid-container > div {
    padding: 0 10px;
  }
  .where .grid-35:last-child {
    margin: 0 0 200px 0;
  }

  .section.who .grid-container {
    padding-top: 10px;
  }

  .who h2 {
    padding: 10px 0;
  }
  .who .grid-container > div {
    padding: 0 10px;
  }
  .who .grid-15 {
    margin-right: 0;
    height: 210px;
  }
  .who .grid-15 div {
    display: block;
  }
  .who .thumbnails {
    text-align: center;
  }
  .who .thumbnails .mobile-grid-45 {
    text-align: left;
  }
  .who .curriculum {
    position: fixed;
    top: 10px;
    margin-left: -10px;
    z-index: 10;
  }
  .who .curriculum p {
    font-size: 13px;
    line-height: 15px !important;
  }
  .who .curriculum p strong {
    line-height: 20px;
  }
  .who .curriculum .close {
    position: relative;
    top: 10px;
    right: 0;
    float: right;
  }
  .who .grid-65 {
    height: 250px;
    overflow: scroll;
    border-right: 0;
    padding: 0 10px 0 10px;
  }
  .who .grid-35 {
    padding: 0 10px 10px 10px;
  }

  .contact h2 {
    padding-top: 0;
  }
  .contact .grid-container > div {
    padding: 0 10px;
  }
  .contact .grid-container .form {
    padding: 0;
  }
  .contact .form {
    margin-top: 15px;
  }
  .contact #message {
    height: 200px;
  }
  .contact .legal {
    margin-top: 0;
  }
  .contact .legal label {
    padding-left: 70px !important;
    font-size: 11px;
  }
  .contact .submit-bt {
    margin-top: 25px;
  }
  .contact .submit-bt button {
    width: 100%;
  }
  .contact .loader-message {
    margin-bottom: 200px;
    text-align: center;
  }
  .contact .footer {
    width: 90%;
    margin: 0 2%;
    text-align: center;
  }
  .contact .footer p {
    line-height: 15px;
    margin-bottom: 20px;
    padding-right: 10px;
  }
  .contact .footer .copyright-menu {
    float: none;
    margin-bottom: 5px;
  }
  .contact .footer .copyright-menu ul li {
    line-height: 17px;
  }
  .contact .footer .copyright-menu ul li:after {
    content: '';
  }
  .contact .footer .copyright-menu ul li:first-child:after {
    content: ' | ';
  }

  .scrollup {
    display: none;
  }
}