/*/*
 *   Reset
 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:700;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}abbr,acronym{border:0;}

button::-moz-focus-inner {border:0; padding:0;} /* Remove button padding in Firefox */ 

/*
 *   Styles
 */
 
* {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
 
html {min-height:100%; height:100%;}

body {min-height:100%; height:100%; font-family:'Raleway', sans-serif; color:#373639;}

body,
textarea {font-family:'Raleway', Arial, Helvetica, sans-serif; font-weight:400; font-size:18px;}

a:link,
a:visited {color:#006866; text-decoration:underline;}
a:hover {text-decoration:none;}

.main .middle a.button:link,
.main .middle a.button:visited {display:inline-block; padding:10px 15px; border:3px solid #006866; color:#006866; text-decoration:none;}
.main .middle a.button:hover {background:#006866; color:#fff;}
.main .middle a.button small {float:right; margin:0 0 0 20px; color:rgba(0,0,0,.5); font-size:14px; line-height:26px; text-transform:uppercase; vertical-align:middle;}
.main .middle a.button:hover small {color:rgba(255,255,255,.75);}

strong {font-weight:bold;}
em {font-style:italic;}

small,
.small {font-size:80%; text-transform:uppercase; color:#ccc;}

h1 {margin:0 0 20px 0; font-size:36px; line-height:1.4em; font-weight:300;}
h2 {margin:0 0 1em 0; font-size:24px; line-height:1.4em; font-weight:bold;}

p {margin:0 0 1em 0; float:left; width:100%;}
p:last-child {margin-bottom:0;}

ul {list-style:disc; margin:0 0 1em 20px; float:left;}
ol {list-style:decimal; margin:0 0 1em 40px; float:left;}
ol li {width:100%; padding:0 0 5px 20px;}
ul li {width:100%;}

hr {margin:5px 0 10px 0; padding:0; background:transparent; color:transparent; height:0px; border:0; border-bottom:1px solid #d9d9d9;}

.outer {float:left; width:100%; height:100%;}

.panel {float:left; width:100%;}
.panel .inner {width:1020px; margin:0 auto;}

.body {min-height:100%; margin-bottom:-196px; padding-bottom:196px;}

header {position:relative; z-index:5; margin:0; padding:20px 0; background:#006866; color:#fff; text-align:center;}
header .value {display:inline-block; vertical-align:baseline; margin:0 30px; font-size:18px; line-height:1em; text-transform:uppercase;}
header .value:first-child {margin-left:0;}
header .value:last-child {margin-right:0;}
header h1 {display:inline-block; vertical-align:baseline; margin:0 50px; font-size:30px; line-height:1em; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:#fff;}
header h1 a:link,
header h1 a:visited {color:#fff; text-decoration:none;}

.sub-page nav {margin:0; background:#fff; color:#006866;}

.search {float:right; width:225px; margin:30px 0 0 0; background:#f1f1f1; border-radius:5px;}
.search i {margin:10px 0 10px 10px; font-size:14px; line-height:1em; color:#959595;}
.search input {padding:10px; background:#f1f1f1; border:0; border-radius:5px; outline:none; font-size:14px; line-height:1em; color:#959595;}

.sub-page nav .inner>ul>li>a:link,
.sub-page nav .inner>ul>li>a:visited {padding-top:30px;}

nav {position:relative; z-index:5; margin:0 0 -245px 0; background:rgba( 255,255,255,.6 ); font-size:20px; line-height:1em; font-weight:600; text-align:center;}
.home-page nav {float:left; clear:left; width:100%;}
nav ul {list-style:none; float:left; margin:0; width:100%;}
nav ul li {vertical-align:middle; display:inline-block; position:relative; z-index:500; width:auto; text-align:left;}
nav ul li a:link,
nav ul li a:visited {display:inline-block; margin:0 1px 0 0; padding:30px 15px; color:#006866; text-decoration:none;}
nav ul li a:hover {}
.sub-page nav .inner>ul>li.hover>a::after {
  position:absolute; top:0; left:0; width:100%; margin:-7px 0 0 0; font-size:40px; text-align:center;
  font-family:FontAwesome;
  content:"\f0d7";
  color:#006866;
}
nav ul li:first-child {border-left:0;}
nav ul li:first-child a:link,
nav ul li:first-child a:visited {}
nav ul li a:link div {display:inline;}
nav ul li a:link i,
nav ul li a:visited i {float:right; color:white;}
.sub-page nav ul li a:link i,
.sub-page nav ul li a:visited i {float: right; color: #006866;}
.sub-page nav ul li ul li ul li a:link i,
.sub-page nav ul li ul li ul li a:visited i {float: right; color: white;}
nav ul li a.hover:link,
nav ul li a.hover:visited {color:#006866;}
nav ul li a:hover i {color:#006866;}
.sub-page nav ul li a:hover i {color:white;}
nav ul li.on a:link,
nav ul li.on a:visited {font-weight:bold;}
nav ul li i {vertical-align:bottom; font-size:14px; margin-right:8px;}

nav ul li.bars {vertical-align:-13px;}
.home-page nav ul li.bars {vertical-align:-6px;}
nav ul li a.bars:link,
nav ul li a.bars:visited {padding:12px;}
nav ul li a.bars i {color:#006866;}
nav ul li a.bars:hover {background:none;}
nav ul li a.bars:hover i {color:rgba( 0, 104, 102, .85 );}

nav ul ul {position:absolute; top:100%; left:0; min-width:240px; display:none; list-style:none; z-index:101; box-shadow:0px 5px 5px 0px rgba( 0,0,0, .12 );}
nav ul li.first ul {margin-left:0;}
nav ul li.selected ul {background:#fff; border-color:#e6e6e6;}
nav ul ul li {float:left; width:100%; height:auto; margin:0; border:0;}
nav ul ul li a:link,
nav ul ul li a:visited,
nav ul li.on ul li a:link,
nav ul li.on ul li a:visited,
nav ul li.hover ul li a:link,
nav ul li.hover ul li a:visited {float:left; width:100%; margin:0px; padding:15px 15px; border:0; background:rgba( 255,255,255, 1 ); font-size:18px; text-transform:none; color:#006866; font-weight:normal; word-wrap:break-word;}
.home-page nav ul ul li a:link,
.home-page nav ul ul li a:visited,
.home-page nav ul li.hover ul li a:link,
.home-page nav ul li.hover ul li a:visited {background:#006866; color:#fff;}
.home-page nav ul li ul li.hover a:link,
.home-page nav ul li ul li.hover a:visited,
.home-page nav ul li ul li a:hover,
.home-page nav ul li.hover ul li a:hover {background:#0a7371;}
nav ul ul li a:hover {}
nav ul li.on ul li a:hover,
nav ul li.hover ul li a:hover,
nav ul li ul li.hover a:link,
nav ul li ul li.hover a:visited {background:#006866; color:#fff;}
nav ul li ul li.hover a i {color:#fff;}
nav ul ul li i {vertical-align:0px; font-size:11px; text-align:center; margin-right:8px; color:#777;}

nav ul ul ul {left:100%; top:0;}

nav ul li.on ul ul li a:link,
nav ul li.on ul ul li a:visited,
nav ul li.hover ul ul li a:link,
nav ul li.hover ul ul li a:visited {background:rgba( 0, 104, 102, .85 );}
nav ul li.on ul ul li a:hover,
nav ul li.hover ul ul li a:hover {background:rgba( 0, 104, 102, 1 );}

.home-page nav ul ul ul li a:hover {background:#006866;}

nav ul.normal {position:relative; z-index:101;}

nav .more {position:fixed; z-index:102; top:0; left:0; max-width:80%; height:100%; overflow-y:auto; overflow-x:hidden; margin:0 0 0 100%; box-shadow:0px 0px 5px 5px rgba(0,0,0,.1); background:#006866; border-left:10px solid rgba( 0,0,0, .2 );}
/*
nav .more {transition:margin-left .5s; -webkit-transform:translateZ(0);}
*/
nav .more .close {position:absolute; z-index:103; right:0px; top:0px; padding:10px; color:#fff; font-size:24px; font-weight:700; line-height:1em; text-decoration:none;}
nav ul.show-mobile {display:none;}
nav .more ul {position:relative; z-index:101;}
nav .more ul li {width:100%; border-top:1px solid rgba(0,0,0,.1);}
nav .more ul li a:link,
nav .more ul li a:visited {width:100%; padding:20px; border:0; font-weight:700; color:#fff;}
nav .more ul li a:hover {}
nav .more ul ul {position:relative; top:0; left:0; box-shadow:none; display:block; }
nav .more ul ul.first {}
nav .more ul ul.first li {border-top:0;}
nav .more ul ul.first li a:link,
nav .more ul ul.first li a:visited {padding-left:40px; font-weight:normal; color:#fff; background:rgba( 0,0,0, .05 );}
nav .more ul ul.first li a:hover {color:#c3c3c3;}
nav .more ul ul.second {border-top:0;}
nav .more ul ul.second li a:link,
nav .more ul ul.second li a:visited {padding-left:60px; font-weight:normal; color:#fff; background:rgba( 0,0,0, .1 );}
nav .more ul ul.second li a:hover {color:#c3c3c3;}
nav .more ul li.on a:link,
nav .more ul li.on a:visited {border:0;}

#response {float:left; width:100%; height:46px; margin:-10px 0 15px 0;}
#response .inner {width:950px; margin:0 auto; padding:5px 20px; border:1px solid #efed98; border-radius:3px; color:#7d7f56; background-image:url('images/highlight.gif');}
#response img {}
#response cite {color:#666;}
#response p {padding:0 0 0 20px; float:none; line-height:36px; font-size:14px; font-weight:bold; margin:0;}

.hero {position:relative; z-index:4; height:490px;}
.hero-image {height:100%; /* background-attachment:fixed !important;*/}

.hero .curve {position:absolute; bottom:0; width:100%; height:256px; background:url('/images/home-curve.png') top center no-repeat; background-size:cover;}
.hero .curve .bottom {position:absolute; bottom:0; width:100%; padding:0 0 35px 0;}
.hero .curve h1 {float:right; margin:0; color:#006866; font-size:73px; line-height:1em; font-weight:600;}
.hero .curve h2 {float:right; clear:right; margin:0; font-size:40px; line-height:60px; font-style:italic; text-transform:uppercase; letter-spacing:10px; color:#006866;}
.hero .curve .fa {margin:90px 0 0 0; text-decoration:none; font-size:45px;}

.hero .prev,
.hero .next {position:absolute; z-index:3; left:50%; top:0; width:28px; height:100%; margin-left:-475px; background:url('/images/hero-arrows.png') left center no-repeat;}
.hero .next {left:auto; right:50%; margin-left:0; margin-right:-475px; background-position:right center;}

.hero-sub {height:275px;}


.values {padding:80px 0; background:#fff; text-align:center;}
.values .value {display:inline-block; margin:0 20px; padding:80px 30px 0 30px; background:top center no-repeat;}
.values .value:hover {background-position:center -140px;}
.values .name {display:inline-block; width:100%; font-size:31px; line-height:1em; font-weight:300; text-align:center; color:#006866;}

.values .value-respect {background-image:url('/images/value-respect.jpg');}
.values .value-excellence {background-image:url('/images/value-excellence.jpg');}
.values .value-honesty {background-image:url('/images/value-honesty.jpg');}
.values .value-responsibility {background-image:url('/images/value-responsibility.jpg');}


.quicklinks {position:relative; z-index:3; padding:80px 0; background:#fff; text-align:center;}

.quicklinks a:link,
.quicklinks a:visited {display:inline-block; min-width:238px; margin:0; padding:240px 50px 0 50px; background:center top no-repeat;}
.quicklinks a:hover {background-position:center -260px;}
.quicklinks .name {display:inline-block; width:100%; font-size:22px; line-height:1em; font-weight:bold; text-align:center; color:#006866;}

.quicklinks a.newsletters {background-image:url('/images/quicklink-newsletters.jpg');}
.quicklinks a.calendar {background-image:url('/images/quicklink-calendar.jpg'); background-position:center 10px;}
.quicklinks a.calendar:hover {background-position:center -250px;}
.quicklinks a.curriculum {background-image:url('/images/quicklink-curriculum.jpg'); background-position:center 20px;}
.quicklinks a.curriculum:hover {background-position:center -240px;}
.quicklinks a.enrolment {background-image:url('/images/quicklink-enrolment.jpg'); background-position:center 10px;}
.quicklinks a.enrolment:hover {background-position:center -250px;}


.welcome {position:relative; z-index:3; background:url('/images/home-welcome.jpg') top center no-repeat; background-size:cover; color:#302f2f; font-size:19px; line-height:31px;}
.welcome .text {float:right; width:565px; padding:50px 50px; background:rgba( 255,255,255, .8 ); font-size:20px; line-height:30px; font-weight:600; color:#006866;}
.welcome p {margin:0 0 1.5em 0;}


.stem-blog {position:relative; height:477px; padding:80px 0; background:#efefef;}
.stem-blog .left {position:relative; z-index:2; float:left; width:420px;}
.stem-blog .left h2 {margin:0 0 40px 0; font-size:52px; line-height:1em; font-weight:900; color:#0a5957;}
.stem-blog .left p {font-size:20px; line-height:29px; color:#0a5957;}
.stem-blog .right {float:right; width:387px;}
.stem-blog .right .button {display:inline-block; width:100%; margin:80px 0 0 0; padding:15px 0; background:#ffd557; color:#0a5957; font-weight:normal; letter-spacing:2px; text-decoration:none; text-align:center;}
.stem-blog .bg {position:absolute; z-index:1; left:0px; top:0px; right:50%; bottom:0px; margin:0 -37px 0 0; background:url('/images/stem-blog-bg.png') top right no-repeat #ffe69a;}


.main {position:relative;}

.left-bg {position:absolute; z-index:1; left:0px; top:0px; right:50%; bottom:0px; margin:0 190px 0 0; background:url('/images/sub-left.jpg') top right repeat;}
.aim-high {margin:0 260px 0 0; background:url('/images/aim-high.png') bottom right no-repeat;}
.middle-bg {position:absolute; z-index:1;}

.main .middle {position:relative; z-index:2; float:right; width:700px; min-height:750px; margin:0; padding:50px 0 139px 40px; font-size:18px; line-height:26px; font-weight:400; color:#111;}
.main .middle h1 {float:left; margin:0 0 40px 0; font-size:44px; line-height:1em; font-weight:600; color:#0e6d6b;}
.main .middle h2 {float:left; clear:left;}
.main .middle h3 {float:left; clear:left; margin:0 0 18px 0; font-size:32px; line-height:1.2em; font-weight:bold; color:#f0c954;}
.main .middle h4 {float:left; clear:left; margin:0 0 1em 0; font-weight:bold;}
.main .middle p {margin:0 0 30px 0;}
.main .middle ul {clear:left; margin-left:30px;}
.main .middle ul li,
.main .middle ol li {padding-bottom:10px;}
.main .middle ol {clear:left;}
.main .middle a:link,
.main .middle a:visited {color:#006866;}
.main .middle a:hover {text-decoration:none;}
.main .middle table {float:left; width:100%; margin:0 0 1em 0;}
.main .middle table th {padding:10px; border:1px solid #d7d7d7; font-weight:bold;}
.main .middle table td {padding:10px; border:1px solid #d7d7d7;}

.main .left {position:relative; z-index:2; float:right; width:320px; margin:0; padding:50px 0 178px 0;}

ul.subnav {margin:0 0 100px 0; list-style:none; font-size:18px; font-weight:600;}
ul.subnav li {float:left; padding:0; width:100%;}
ul.subnav li a:link,
ul.subnav li a:visited {float:left; width:100%; margin:0 0 12px 0; padding:12px 16px 12px; text-decoration:none; color:#0e6d6b;}
ul.subnav li a:hover {background:rgba( 255,255,255, 0.25 );}
ul.subnav li:last-child a {}
ul.subnav li.suboff a:link, 
ul.subnav li.suboff a:visited,
ul.subnav li.subon a:link,
ul.subnav li.subon a:visited {padding:8px 8px 8px 24px; font-size:14px;}
ul.subnav li.second a:link,
ul.subnav li.second a:visited {padding:8px 8px 8px 30px; font-size:14px;}
ul.subnav li.third a:link,
ul.subnav li.third a:visited {padding:8px 8px 8px 50px; font-size:14px;}
ul.subnav li.on a:link,
ul.subnav li.on a:visited,
ul.subnav li.subon a {background:rgba( 14,109,107, 1 ); color:#fff; font-weight:bold;}
ul.subnav li.subtitle a:link, 
ul.subnav li.subtitle a:visited {font-weight:700;}
ul.subnav li.title {list-style:none; display:none;}
ul.subnav li.title a:link,
ul.subnav li.title a:visited {font-size:30px; font-family:'Helvetica Bold'; text-decoration:none; border:none;}
ul.subnav li.title a:hover {}

footer {position:relative; z-index:2; min-height:196px; padding:30px 0; background:#404141; color:#fff; font-size:12px;}
footer .inner {width:860px; margin:0 auto;}

footer .left {float:left; width:50%; padding:12px 0 0 0;}
footer .left img {margin:0 0 10px 0;}

footer .right {float:right; width:50%; text-align:right;}

footer p {margin:0 0 1em 0;}
footer a:link,
footer a:visited {color:#fff; text-decoration:none;}
footer a:hover {text-decoration:underline;}
footer .pipe {margin:0 10px; color:rgba(255,255,255,.5);}

footer img {vertical-align:top;}
footer .sa_gov_au_logo {margin:12px 30px 0 0;}

.sitemap {float:left; clear:left;}
.sitemap a:link,
.sitemap a:visited {float:left; clear:left; width:auto; min-width:150px; background:url('/images/page-tree.gif') 0px 8px repeat-y; line-height:1.4em;}
.sitemap a span {display:block; float:left; padding:0 5px; width:100%; height:100%; line-height:2em; background:#fff;}
.sitemap a.root {font-weight:bold;}
.sitemap a:hover span {text-decoration:underline;}

.search-results .search-result {float:left; clear:left; width:100%; margin:0 0 5px 0; padding:15px; background:#f1f1f1;}
.search-results a:link,
.search-results a:visited {text-decoration:none;}
.main .middle .search-results a:hover {text-decoration:underline;}
.search-results .highlight {padding:0 3px; background:#5ac3d6; color:#fff;}

.news-list {float:left; width:100%; margin:0 0 10px 0; padding:20px; background:#f1f1f1; border-radius:3px;}
.news-list img {float:left; width:100px; height:auto; margin:0 20px 0 0;}
.news-list .text {float:left; width:500px;}
.main .middle .news-list h2 {margin:0 0 15px 0; color:#00498a; font-size:38px; line-height:41px;}
.news-list .date {clear:left; margin:0 0 15px 0; color:#939290;}
.news-list .snip {font-family:'Avenir Medium', sans-serif; color:#163e72;}
.main .middle .news-list h2 a:link,
.main .middle .news-list h2 a:visited {text-decoration:none; color:#00498a;}

.btn.newsletter-year, .button.newsletter-year {
  font-size: 2em !important;
  font-weight: bold !important;
  border: 3px solid #0e6d6b;
  margin-right: 8px;
}

.btn.newsletter-year.active, .button.newsletter-year.active {
  background: #0e6d6b !important;
  color: #fff !important;
}


.gallery a.gallery-a {
  text-decoration: none !important;
}

.gallery img {
  width: calc(650px / 3 - 30px);
}

@media all and (max-width: 1020px) {
  .gallery img {
    width: 23%;
  }
}

@media all and (max-width: 800px) {
  .gallery img {
    width: 32%;
  }
}

@media all and (max-width: 600px) {
  .gallery img {
    width: 48%;
  }
}

@media all and (max-width: 450px) {
  .gallery img {
    width: 98%;
  }
}

.header-image {
  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  background: #fff !important;
  padding: 4px;
  max-width: 98%;
  margin: 0 0 20px 0;
  display: inline-block;
}

.header-image img {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  height: auto;
}

.show-mobile {display:none;}
.show-1020 {display:none;}
.hide-mobile {}

@media all and (max-width:1020px){
  
  .show-1020 {display:block;}

  .panel .inner {width:100%;}

  .left-bg {display:none;}
  .middle-bg {display:none;}
  
  .hero {height:750px;}
  .hero .curve .bottom {padding-left:30px; padding-right:30px;}
  
  header .value {display:none;}
  
  img {max-width:100%; height:auto;}
  
  header .logo {margin:0 0 0 20px;}
  header .phone {margin:0 20px 0 0;}
  
  nav {display:inline-block; text-align:center;}
  .home-page nav {margin-top:0;}
  
  nav ul {float:none; width:100%; text-align:center;}
  nav ul.more,
  nav ul ul {padding:0;}
  
  nav ul li {float:none; display:inline-block;}
    
  .main .left {float:right; width:100%; padding:20px 10px; background:#f0c954;}
  .main .middle {float:right; width:100%; min-height:1px; margin:0; padding:30px;}
  
  .hero-image {background-attachment:scroll !important;}

  ul.subnav {margin:0; min-height:1px;}
  ul.subnav li a:link,
  ul.subnav li a:visited {}
  
  .stem-blog {height:auto; padding:0;}
  .stem-blog .bg {display:none;}
  .stem-blog .left {width:100%; margin:0; padding:30px; background:#ffe69a;}
  .stem-blog .right {width:100%; padding:30px; text-align:center;}
  .stem-blog .right .button {margin-top:30px; max-width:500px;}
  
  footer {padding:30px;}
  
  .quicklinks {padding:30px; text-align:center;}
  .quicklinks a.link:link,
  .quicklinks a.link:visited {float:none; clear:none; margin:0 30px; margin-bottom:60px; display:inline-block;}
  
}

@media all and (max-width:768px){

  .show-mobile {display:inline-block;}
  .hide-mobile {display:none;}
  
   
  .home-page .hero {height:auto !important;}
  
  .hero .curve {position:relative; bottom:auto; height:auto; margin:0; background:rgba( 255,255,255, .8 );}
  .hero .curve .bottom {position:relative; bottom:auto; float:left; padding:60px 30px;}
  .hero .curve .fa {display:none;}
  .hero .curve h1 {width:100%; text-align:center;}
  .hero .curve h2 {width:100%; margin:20px 0 0 0; text-align:center;}
  
  nav {margin-bottom:0;}
  
  .values {padding:10px 0;}
  .values .value {margin:30px;}
  
  nav ul li a:link,
  nav ul li a:visited,
  .home-page nav ul li a:link,
  .home-page nav ul li a:visited {padding:15px;}
  
  .sub-page nav {border-bottom:2px solid #006866; padding-bottom:15px;}
  
  nav ul li a.bars:link,
  nav ul li a.bars:visited {padding:8px 0 0 15px;}
  
  .search {display:none;}
  
  nav ul.show-mobile {display:inline-block;}
  
  .main .middle h1 {font-size:48px;}
  
  .body {overflow-x:hidden; min-height:1px; margin-bottom:0; padding-bottom:0;}
  
  .sub-page .hero {max-height:300px;}
  
  footer {height:auto; min-height:81px;}
  footer .left,
  footer .right {display:inline-block; float:none; width:100%; text-align:center;}
  footer .right {margin-top:30px;}

}

@media all and (max-width:565px){
  
  .welcome .text {width:100%; padding:30px;}
  
}

@media all and (max-width:568px){
  
  header .logo {float:none;}
  nav {float:none;}
  
}

@media all and (max-width:509px){
  
  .quicklinks .links {width:192px;}
  .quicklinks .links a:visited,
  .quicklinks .links a:link {margin-left:0;}
  
}

@media all and (max-width:560px){
  
  header h1 {font-size:36px;}

}

.card {
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
}

.card h2 {
	margin-top: 0;
}
  
.card p {
  margin-bottom: 5px !important;
  font-weight: 400 !important;
}

.card p, .card h2 {
  float: none !important;
}
  
@media (max-width: 700px) {
	.card-container {
		padding: 0 10px;
	}

  .main .middle {padding-left: 15px; padding-right:15px}
}