﻿

@media (max-width:480px) {

    .phone_full_width{width:100%;}

    .cisco_right_section, .contacts_container{padding:0;}

    .phone_padding_20{padding:20px;}
    .arch-Title-icon{
        font-size: 32px;
    }
    .arch-Title{
            font-size: 20px;
            padding-left: 10px;
    }
    .legendRole{
        clear:both;
        padding:0;
    }
    .ng-modal-Form{
        width: 80%;
        left: 29.5%;
    }
    .imageSize, .left_menu_items_imageSize {
        width:100%;
    }
    .marginTopTitle {
        margin-top:0px;
    }
    .boostScheduleLink {
        width:80%;
        margin-bottom:20px;
    }
	
}


@media  (max-width:1024px){
    .cisco_content {
    padding: 20px;
   
    margin-bottom: 20px;
    
}
    
    .ng-modal-Form{
        width: 80%;
      
    }

   
    
    .cisco_phone_menu, .cisco_phone_menu .cisco_logo, .top_menu, .cisco-navwidget-button, .cisco_phone_logo_container, .sliding_menu .top_menu{display:block;}

    .cisco_phone_menu .cisco_logo{
        width: 50px;
        height: 15px;
        display: inline-block;
        padding-left:15px;
        margin-bottom:0px;
    }

    .cisco_phone_logo_container{margin-bottom:15px;}

    .cisco_page_name, .ignite{
        text-align:left;
        background-color:transparent;
        margin:0;
    }

    .cisco-navwidget-button{
        width: 20px;
        float: left;
        font-size: 25px;
        color: #00548f;

    }

    /*.cisco_phone_menu .cisco_page_name span{padding-left:33px;}*/

    .cisco_main_pages .cisco_page_name:first-child, .cisco_main_pages .cisco_page_name:nth-child(2), 
    .cisco_main_pages .cisco_page_name:nth-child(3), .ignite{border-bottom:none;}
    
    .logo_container h2{margin-left:0px;}
    
    .menuInfo{
    padding-left:31px;
}
.desktopmenu{
        display:block;
    }
    .mobilemenu{
        display:none;
    }
	

}


@media (max-width : 768px) {
    .gutter-40 .grid-3-25 {
        width: 100%;
    }
    .ng-modal-Form{
        width: 90%;
      
    }
    .cisco-main-content , .grid-container{
		width:100%;
		float:left;
	}
	.videoTitle{
		padding-left:0;
	}

    .grid-container.gutter-40 .row .grid {
    margin-left: 0px;
}
   .cisco_left_section, .cisco_page_name{width:100%;}
    .tabs {
        margin-bottom: 15px;
    }
    
   .tabs li, .ignite_items li{
        display: list-item;
        margin-bottom: 5px;
    }
    .desktopmenu{
        display:none;
    }
    .mobilemenu{
        display:block;
    }
     .cisco_main_pages, .cisco_logo, .desktop_menu, .sliding_menu{display:none;}
    .cisco_right_section {
    padding-left: 0px;
    width: 100%;
    float: none; 
}
    .consultation_form input[type="text"] {
    width: calc(100% - 20px);
}
    .grid-container{
    padding:0;
    margin:15px 0;
}
    .consultation_form {
        height: 430px;
        overflow: scroll;
    }    
    .grid-container .row {
        margin: 0 auto;
        padding: 10px;
    }
.consultation_form.grid-container .row{
     margin: 0 auto;
}
.consultation_form h1, .consultation_form h3{
    margin-bottom: 0px;
}
.ng-modal-dialog-content .grid-container .grid-50{
    margin-bottom: 10px !important;
}
.ng-modal-dialog-content .grid-container .grid-50:last-child{
    margin-bottom: 0px !important;
}
    .left_align {
        margin-left: 15px;
    }
    .translation-links {
        width:100%;
    }
    .socialIcons {
        display:inline-block;
    }
	.boostScheduleLink , .viewCoreCalendarLink{
        width: 56%;
		float: none;
		margin: 0 auto;
		margin-bottom: 20px;
    }
    .imgbutton, .umbrellaImgbutton {
        margin: 10px auto 0px auto;
    } 
	.boostDescription {
    width: 100%;
	float:none;    
	}
    .briefcaseimg {
        max-width: 39%;
    }
}
@media (max-device-width: 736px), (max-width: 736px){
    .swatches .grid.architecture_name {
        float: left !important;
    }
}
@media (max-width: 768px) and (min-width: 600px){
       .ng-modal-dialog-content{
        padding: 10px;
}
}
@media (max-width: 600px){
    .ng-modal-dialog-content{
        padding: 5px;
    }
    .consultation_form input[type="text"] {
        width: calc(100%);
    }
    .register_btn {
        width: 60%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .tabs_heading{
        margin-top: 20px;
    }

    .margin-B-20{
        margin-bottom: 20px;
    }

    .gutter-40 .grid-50 {
        width: 100%;
    }

    .resourceTitle a img {
        max-width: 100%;
        height: inherit;
    }

    .resourceTitle {
        width: 50%;
        margin: auto;
    }

    #circle-1 {
        left: 0px;
        top: 212px;
    }
    #circle-2 {
        left: 105px;
        top: 229px;
    }
    #circle-3 {
        left: 210px;
        top: 222px;
    }
    .callout{
        width: 170px;
    }
        .callout.Professional {
            left: 14px;
            top: -136px;
        }
        .callout.Insights {
            left: -63px;
            top: -170px;
        }
        .callout.Platform {
            left: -95px;
            top: -159px;
        }

    .SimpleIT-icon {
        text-align: center;
        display: block;
        margin: 0 auto;
    }
    .TCO_Calculator_text{
        margin: 0 auto;
    }
    .table_left_border {
        border-top: 2px solid;
        border-color: rgb(0,177,226);
        border-left: none;
        padding-top: 10px;
    }
    .IT_today {
        margin: 0;
    }
    .sales_boost_architecture {
        display: block;
    }
    .foundation, .intermediate, .consultative {
        display: block;
        margin: 0 auto 20px;
    }
    .simpleIT_products ul li{
        float: none;
    }
        .simpleIT_products ul li a{
            float: left;
        }
    .simpleIT_products{
        padding-left: 130px;
    }

    .arrow-right{
        display: none;
    }
    .align-center{
        display: block;
        text-align: center;
    }
    .width-15.grid {
        margin-bottom: 10px!important;
    }
    .cisco_umbrella_cloud{
        height: 400px;
    }
    .text-justify {
        float: none;
        text-align: center;
        margin: 0px;
    }
    .circletooltip .callout.Professional:before {
        left: 0px;
    }

    .circletooltip .callout.Insights:before,
    .circletooltip .callout.Platform:before {
        left: 65px;
    }

    .cisco_menu_items .simpleIT-Branding:hover .simpleIT_icon, .cisco_menu_items .simpleIT-Branding.active .simpleIT_icon {
        display: none;
    }

    .cisco_menu_items .simpleIT_iconHover {
        display: none;
    }

    .cisco_menu_items .simpleIT-Branding:hover .simpleIT_iconHover, .cisco_menu_items .simpleIT-Branding.active .simpleIT_iconHover {
        display: block;
    }

    .interconnect_City_img{
        width: 100%;
    }

    #circle_1 {
        top: 216px;
        left: 0px;
    }

    #circle_2 {
        top: 216px;
        right: 0px;
    }

    .line-1 {
        width: 62px;
        top: 184px;
        transform: rotate(90deg);
        left: 17px;
    }

    .line-2 {
        width: 62px;
        top: 185px;
        transform: rotate(90deg);
        right: 20px;
    }

    .callTooltip.circle1-info {
        left: -5px;
        top: -126px;
    }

        .callTooltip.circle1-info:after {
            left: 14%;
        }

    .callTooltip.circle2-info {
        right: 0px;
        top: -172px;
    }

        .callTooltip.circle2-info:after {
            left: 79%;
        }

    .top_margin{
        margin-top: 170px;
    }

    .text_c {
        text-align: center;
    }

    .servicesBtn {
        width: 100%;
        margin-left: 20px;
    }

    .align-left {
        float: left;
    }

    .multicloud_infrastructure_img{
        width: 50%;
        margin: 0;
    }

    .left-align {
        text-align: left;
    }

    .learnMorebtn {
        clear: both;
    }

    .custom_border{
        border-left: none;
        margin-left: 0px!important;
        padding-left: 0px;
    }
    .imgbtn {
        margin-left: 50px !important;
    }
}


    @media (min-width : 740px) and (max-width : 770px) {
        .gutter-40 .grid-2-33,.gutter-40 .grid-33 { width:100%;}
	.gutter-40 .grid-33 { margin-top:20px;}
}

@media only screen and (min-width: 1170px) {
    .cd-timeline {
        margin-top: 3em;
        margin-bottom: 3em;
    }

    .cd-timeline__container::before {
        /*left: 50%;*/
        margin-left: -2px;
    }
}


@media only screen and (min-width: 1170px) {
    .cd-timeline__block {
        margin: 4em 0;
    }
}

@media only screen and (min-width: 1170px) {
    .cd-timeline__img {
        width: 60px;
        height: 60px;
        margin-left: -30px;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

        .cd-timeline__img.cd-timeline__img--bounce-in {
            visibility: visible;
            -webkit-animation: cd-bounce-1 0.6s;
            animation: cd-bounce-1 0.6s;
        }
}

@media only screen and (max-width: 1170px) {
    .cd-timeline__img {
        width: 60px;
        height: 60px;
        margin-left: -30px;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

        .cd-timeline__img.cd-timeline__img--bounce-in {
            visibility: visible;
            -webkit-animation: cd-bounce-1 0.6s;
            animation: cd-bounce-1 0.6s;
        }
}

@-webkit-keyframes cd-bounce-1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes cd-bounce-1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@media only screen and (min-width: 768px) {
    .cd-timeline__content h2 {
        font-size: 2rem;
    }

    .cd-timeline__content p {
        font-size: 16px;
    }

    .cd-timeline__read-more {
        font-size: 14px;
    }
}

@media only screen and (min-width: 1170px) {
    .cd-timeline__content {
        /*margin-left: 0;*/
        padding: 1.6em;
        /*width: 45%;*/
        /* Force Hardware Acceleration */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

        .cd-timeline__content::before {
            top: 24px;
            left: 100%;
            border-color: transparent;
            border-left-color: white;
        }

    .cd-timeline__read-more {
        float: left;
        margin-left: 25px;
    }


    /*.cd-timeline__block:nth-child(even) .cd-timeline__content {
        float: right;
    }

        .cd-timeline__block:nth-child(even) .cd-timeline__content::before {
            top: 24px;
            left: auto;
            right: 100%;
            border-color: transparent;
            border-right-color: white;
        }

    .cd-timeline__block:nth-child(even) .cd-timeline__read-more {
        float: right;
    }

    .cd-timeline__block:nth-child(even) .cd-timeline__date {
        left: auto;
        right: 122%;
        text-align: right;
    }*/

    .cd-timeline__content.cd-timeline__content--bounce-in {
        visibility: visible;
        -webkit-animation: cd-bounce-2 0.6s;
        animation: cd-bounce-2 0.6s;
    }
}

@media only screen and (min-width: 1170px) {
    /* inverse bounce effect on even content blocks */
    .cd-timeline__block:nth-child(even) .cd-timeline__content.cd-timeline__content--bounce-in {
        -webkit-animation: cd-bounce-2-inverse 0.6s;
        animation: cd-bounce-2-inverse 0.6s;
    }
}

@-webkit-keyframes cd-bounce-2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes cd-bounce-2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes cd-bounce-2-inverse {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes cd-bounce-2-inverse {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
}