body {background: #ebebeb;font: 20px/1.4 "Source Sans Pro",Helvetica,Arial,sans-serif;color: #000; margin:0px;}
body #page {background: #fff;width: 990px;margin: 5px auto 10px;padding: 10px;}
body #page span.web {float: left;width: 100%;margin: 2% 0 1%;}
body #page img { max-width:100%;}
#header {position: relative;text-align: center;z-index: 10;}
#header .container {height: 110px;position: relative;padding-top: 0;background-color: #000000;width: 100%;border-bottom: 1px solid #b11116;}
#header .logo {width: 300px;height: 110px;margin: 0 auto 0;margin-top: 0;}
#header .logo a { cursor:pointer; display:block; width:300px; height:110px;line-height: 140px;}

.tooltip {display:none;position:absolute;border:1px solid #333;background-color:#161616;border-radius:5px;padding:10px;color:#fff;font-size:12px Arial;width:250px;}

.menu { float:left; width:100%;}
ul.menu { float:left; background-color:#000000; width:100%; margin:0px auto; padding:0px;}
ul.menu li.left { float:left; width:50%;  padding:0; list-style-type:none; text-align:center;}
ul.menu li.right { float:left; width:50%; padding:0; list-style-type:none; text-align:center;}
ul.menu li a { color:#ffffff; font-size:20px; text-decoration:none; font-weight:700;line-height: 55px;}

.abbonamenti span.subtitle {float: left;width: 100%;font-size: 1.2em;margin-bottom: 25px;}
.abbonamenti h1 { color: #007bbe;margin: 20px 0 0 0;}
.abbonamenti span.prezzi {float: left;width: 100%;background-color: #eee;padding: 10px 0;line-height: 46px;border-bottom: 1px solid #fff;}
.abbonamenti span.prezzi a.ac_toggle {float: left;color: #1a1a1a;text-decoration: none;font-weight: 600;text-transform: uppercase;margin: 1% 5%;width: 55%;text-align: left;font-size: 1.6em;}
.abbonamenti span.prezzi a.acquista {width: 25%;margin: 1% 0;background-color: #ca1326;color: #ffffff;border: 0px;padding: 0;font-size: 20px;font-weight: 600;cursor: pointer;float: left;text-align: center;border-radius: 5px;text-decoration: none;}

.swiper-container{ width:100%; height:auto;}
.swiper-container img {left: 50%;top: 50%;position: relative;transform: translate(-50%,-50%);}
.swiper-container img.cover {left: auto;top: auto;transform: none;}
.swiper-button-disabled{opacity: .1;cursor: default;}
.swiper-button-next, .swiper-button-prev {position: absolute;top: 50%!important;}

.swiper-slide { background-color: #eee; height: 555px!important;}
.swiper-slide a{cursor: move;cursor: -webkit-grab;cursor: -moz-grab;}
.swiper-slide .default {float: left;background-color: #ffffff;width: 100%;height: 555px;}
.swiper-slide .default .left { position: relative;width: 45%;margin-right: 1%;float: left;height: 100%;}
.swiper-slide .default .left .back {background: url("../assets/img/ipad.png"); width: 309px; height: 423px; position: absolute;z-index: 1;top: 50px;left: 30px;}
.swiper-slide .default .left .front {background: url("../assets/img/iphone.png"); width: 184px; height: 323px; position: absolute;z-index: 2;top: 175px;left: 230px;}
.swiper-slide .default .left .front img { width: 129px; height: 168px;margin: 65px 0 0 27px;}
.swiper-slide .default .left .back img { width: 254px; height: 330px;margin: 33px 0 0 26px;}
.swiper-slide .default .right span.title {float: left;width: 100%;font-size: 30px;font-weight: 600;line-height: 34px;margin: 130px 0 30px;}
.swiper-slide .default .right a {background-color: #cc0000;color: #ffffff;text-align: center;padding: 20px;float: left;font-weight: 600;font-size: 18px; text-decoration: none;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; cursor: pointer;}

.swiper-slide .default .right {position: relative;width: 50%;margin-right: 0%;float: left;height: 100%;}
.swiper-pagination-bullet {width: 15px!important;height: 15px!important;}
.swiper-pagination-bullet-active {background: #ca1326!important;}
.swiper-button-next {background-image: url("http://www.corrieredellosport.it/assets/img/arrow_right_active.png");display: block;height: 550px;top: 50%!important;right: 0px;width: 50px;}
.swiper-button-prev {background-image: url("http://www.corrieredellosport.it/assets/img/arrow_left_active.png");display: block;height: 550px;top: 50%!important;left: 0px;width: 50px;}

.selector {border: 1px solid #ddd;background: #fff;border-radius: 2px;height: 55px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;padding: 0 26px 0 12px;font: 1.6em Gibson,sans-serif;
color: #202020;width: 90%; margin:0 5%;position: relative;line-height: 55px;transition: all .2s ease; float:left;}
.selector select {position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;background: #fffffe;opacity: 0; z-index: 1;}
.selector:after {content: "\f0d7";font: 16px/100% FontAwesome;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-indent: 0;position: absolute;top: 50%;right: 10px;margin-top: -8px;}

span.info {float: left;width: 90%;margin: 5%; text-transform:capitalize; font-size:1.2em;}

#app { float:left; width:100%; font-size:14px; font-weight:normal; line-height:18px; margin: 20px 0;}
#app h1 {float: left;margin: 0;width: 100%;font-size: 1.4em;color: #CD0213;font-weight: 600;}
#app ul { float:left; width:100%; margin:2% 0; padding:0px;}
#app ul li { list-style-type:none; float:left; margin:0px; padding:0px; margin:0 5px 0 0;}
#app ul li a { cursor:pointer;}

#footer {background-color: #1a1a1a;text-align: center;padding: 30px 0;font-size: 17px;line-height: 110%;}
#footer .container {width: auto;margin: 0 auto;position: relative;}
#footer ul.social {margin:0 0 18px; padding:0;}
#footer ul.social li {display: inline-block;margin: 0 5px;}
#footer ul.social a {display: block;height: 30px;width: 30px;text-indent: -999em;position: relative;color: #fff;transition: all .2s ease;}
#footer ul.social li.facebook a:before {content: "\f09a";}
#footer ul.social li.instagram a:before {content: "\f16d";}
#footer ul.social li.twitter a:before {content: "\f099";}
#footer ul.social a:before {content: "\f09a"; /*font: 16px/100% FontAwesome;*/ -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-indent: 0;position: absolute;top: 50%;left: 5px;
font-size: 20px;line-height: 100%;margin-top: -10px;width: 20px;text-align: center;}
#footer a {color: #CD0213;text-decoration: none;}
#footer p {margin-bottom: 18px; color:#ffffff;}



@media screen and (max-width:800px) {
	body #page {width: 96%;padding: 2%;}
	ul.menu li a {font-size: 16px;}
	}

@media screen and (max-width:768px) {
	ul.menu li a {font-size: 16px;}
	body #page span.web { display:none;}
	ul.menu li.left {display: none;}
	ul.menu li.right {width: 90%;padding: 0 5%;}
    .abbonamenti span.prezzi a.ac_toggle {width: 40%;}
    .swiper-slide .default .left {width: 57%;margin: 0;}
    .swiper-slide .default .right {width: 43%;}
    .swiper-slide .default .right span.title {font-size: 24px;line-height: 30px;}
	}

@media screen and (max-width:736px) {
	input.acquista {width: 15%;margin: 5px 0 0 40px;}
	}

@media screen and (max-width:732px) {
	ul.menu li.left {float: left;width: 90%;margin: 0 5%;list-style-type: none;text-align: center;background: none; padding:2% 0;border-bottom: 1px solid #ca1326;}
	ul.menu li.right {float: left;width: 90%;padding: 0;list-style-type: none;text-align: center;margin: 0 5%; padding:2% 0;}
	}

@media screen and (max-width:667px) {
	ul.menu li a {font-size: 18px;line-height: 30px;}
    .swiper-slide .default .left {width: 55%;}
    .swiper-slide .default .right {width: 40%;}
    .swiper-slide .default .left .back {left: 0;}
    .swiper-slide .default .left .front {left: 160px;}
    .swiper-slide .default .right a {padding: 20px 15px;}
	}

@media screen and (max-width:640px) {
	ul.menu li a {font-size: 16px;line-height: 40px;}
	ul.menu li.left {width: 90%;padding: 0 2%; margin:0 5%;}
	ul.menu li.right {width: 90%;padding: 0 2%; margin:0 5%;}
	ul.menu {margin: 0px auto 15px;}
	}

@media screen and (max-width:568px) {
	ul.menu li.left {float: left;list-style-type: none;text-align: center;background: none; padding:1% 0;border-bottom: 1px solid #ca1326;}
	ul.menu li.right {float: left;padding: 0;list-style-type: none;text-align: center;padding:1% 0;}
	}

@media screen and (max-width:480px) {
    .abbonamenti span.prezzi a.ac_toggle {width: 50%;font-size: 1em;}
    .abbonamenti span.prezzi a.acquista {padding: 0 5%;}
	}

@media screen and (max-width:414px) {
	input.acquista {width: 50%;margin: 3% 25% 0;}
	body #page span.web {margin: 5% 0 1%;}
    .swiper-slide .default .left .back {left: 10px; top: 20px;}
    .swiper-slide .default .left .front {left: 210px;top: 135px;}
    .swiper-slide .default .left {width:100%; height: 445px;}
    .swiper-slide .default .right span.title { display: none;}
    .swiper-slide .default .right {width:100%; height: 110px;}
    .swiper-slide .default .right a {margin: 0 5%;width: 80%;}
	}

@media screen and (max-width:412px) {
	}

@media screen and (max-width:375px) {
	#app ul {margin:4% 0;}
    .swiper-slide .default .left .front {left: 170px;top: 135px;}
	}

@media screen and (max-width:360px) {
	ul.menu li a {line-height: 40px;}
	}

@media screen and (max-width:320px) {
	.swiper-slide .default .left .back {left: 0;top: 10px;}
    .swiper-slide .default .left .front {left: 130px;top: 130px;}
    .swiper-slide .default .right a {width: 77%;}
    .abbonamenti span.prezzi a.ac_toggle {font-size: 0.9em;}
    .abbonamenti span.prezzi a.acquista {font-size: 16px;}
    #app ul li {width: 31%;}
	}
